我是新来的jQuery / JS。 以下是我尝试使用子菜单的基于jQuery的菜单。 我不确定在这里做什么来解决这个问题或从哪里去。
$(document).ready(function() { $(".toggle-btn").click(function() { $(this).toggleClass("active"); $(".parent-nav").toggleClass("in"); }); $("#mainnav .child-nav > a").click(function() { $(this).toggleClass("active"); $(".submenu").toggleClass("in"); return false; }); });body { padding: 20px 50px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); border: 0; } #mainnav { position: relative; z-index: 1; float: right; padding: 1.3rem 1rem; padding-right: 0; } #mainnav li:last-of-type .submenu { left: auto; right: 0; } #mainnav .toggle-btn { display: block; background: #fff; border: none; width: 42px; height: 42px; padding: 0; cursor: pointer; } #mainnav .toggle-btn:hover, #mainnav .toggle-btn:focus { background: #e9ecef; } #mainnav .toggle-btn:active, #mainnav .toggle-btn.active { background: #20ac62; } #mainnav .toggle-btn:active .bar, #mainnav .toggle-btn.active .bar { background: #fff; } #mainnav .toggle-btn .bar { display: block; background: #000; width: 24px; height: 3px; margin: 0 auto; } #mainnav .toggle-btn .bar + .bar { margin-top: 5px; } #mainnav .parent-nav, #mainnav .submenu { margin: 0; padding: 0; list-style: none; } #mainnav .parent-nav { display: flex; flex-wrap: wrap; justify-content: space-between; visibility: hidden; opacity: 0; pointer-events: none; background: #f8f9fa; position: absolute; top: 100%; right: 0; width: calc(1110px - 120px); transition: all 0.3s; } @media (max-width: 1199px) { #mainnav .parent-nav { width: 220px; display: block; } } #mainnav .parent-nav.in { visibility: visible; opacity: 1; pointer-events: auto; } #mainnav .parent-nav a { position: relative; display: block; padding: 0.875rem 1.25rem; font-size: 0.875rem; font-weight: 700; color: #212529; line-height: 1.5rem; text-transform: uppercase; text-decoration: none; } #mainnav .parent-nav a:before { content: ''; position: absolute; left: 0; bottom: 0; right: 0; height: 4px; background: #20ac62; opacity: 0; transition: all 0.15s; } #mainnav .parent-nav a:hover:before, #mainnav .parent-nav a:focus:before { opacity: 1; } #mainnav .child-nav { position: relative; } #mainnav .child-nav:hover .submenu, #mainnav .child-nav:focus .submenu { display: block; } #mainnav .child-nav a.active { background: #20ac62; } #mainnav .child-nav .caret { margin-left: 4px; } #mainnav .child-nav .submenu { position: absolute; top: 100%; left: 0; z-index: 1; display: none; background: #fff; min-width: 220px; } #mainnav .child-nav .submenu.in { min-width: 0; position: relative; display: block; } #mainnav .child-nav .submenu a { padding: 0.5rem 1rem; text-transform: none; font-weight: 400; } #mainnav .child-nav .submenu a:before { display: none; } #mainnav .child-nav .submenu a:hover, #mainnav .child-nav .submenu a:focus { background: #e9ecef; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div id="mainnav"> <button class="toggle-btn"> <span class="sr-only">Menu</span> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </button> <ul class="parent-nav"> <li><a href="">Home</a></li> <li class="child-nav"> <a href="">Properties <i class="fas fa-caret-down caret">˅</i></a> <ul class="submenu"> <li><a href="">For Sale</a></li> <li><a href="">For Rent</a></li> <li><a href="">List Your Property</a></li> </ul> </li> <li><a href="">Services</a></li> <li><a href="">Contact Us</a></li> <li class="child-nav"> <a href="">Company Group <i class="fas fa-caret-down caret">˅</i></a> <ul class="submenu"> <li><a href="">Company Investments</a></li> <li><a href="">Company Hotels</a></li> <li><a href="">Company Developers</a></li> <li><a href="">Company Internship</a></li> </ul> </li> </ul> </div>正如你在上面的代码片段中看到的那样,存在一个相当大的问题。 点击任一个子菜单都会触发.submenu上的class .in ,这显然不是预期的行为。 而且我也不知道如何在特定的视口宽度后触发此脚本。
我该如何解决?
I'm new to jQuery/JS. The following is my attempt on a jQuery based menu with submenus. I'm not sure what to do here to fix this or where to go from here.
$(document).ready(function() { $(".toggle-btn").click(function() { $(this).toggleClass("active"); $(".parent-nav").toggleClass("in"); }); $("#mainnav .child-nav > a").click(function() { $(this).toggleClass("active"); $(".submenu").toggleClass("in"); return false; }); });body { padding: 20px 50px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); border: 0; } #mainnav { position: relative; z-index: 1; float: right; padding: 1.3rem 1rem; padding-right: 0; } #mainnav li:last-of-type .submenu { left: auto; right: 0; } #mainnav .toggle-btn { display: block; background: #fff; border: none; width: 42px; height: 42px; padding: 0; cursor: pointer; } #mainnav .toggle-btn:hover, #mainnav .toggle-btn:focus { background: #e9ecef; } #mainnav .toggle-btn:active, #mainnav .toggle-btn.active { background: #20ac62; } #mainnav .toggle-btn:active .bar, #mainnav .toggle-btn.active .bar { background: #fff; } #mainnav .toggle-btn .bar { display: block; background: #000; width: 24px; height: 3px; margin: 0 auto; } #mainnav .toggle-btn .bar + .bar { margin-top: 5px; } #mainnav .parent-nav, #mainnav .submenu { margin: 0; padding: 0; list-style: none; } #mainnav .parent-nav { display: flex; flex-wrap: wrap; justify-content: space-between; visibility: hidden; opacity: 0; pointer-events: none; background: #f8f9fa; position: absolute; top: 100%; right: 0; width: calc(1110px - 120px); transition: all 0.3s; } @media (max-width: 1199px) { #mainnav .parent-nav { width: 220px; display: block; } } #mainnav .parent-nav.in { visibility: visible; opacity: 1; pointer-events: auto; } #mainnav .parent-nav a { position: relative; display: block; padding: 0.875rem 1.25rem; font-size: 0.875rem; font-weight: 700; color: #212529; line-height: 1.5rem; text-transform: uppercase; text-decoration: none; } #mainnav .parent-nav a:before { content: ''; position: absolute; left: 0; bottom: 0; right: 0; height: 4px; background: #20ac62; opacity: 0; transition: all 0.15s; } #mainnav .parent-nav a:hover:before, #mainnav .parent-nav a:focus:before { opacity: 1; } #mainnav .child-nav { position: relative; } #mainnav .child-nav:hover .submenu, #mainnav .child-nav:focus .submenu { display: block; } #mainnav .child-nav a.active { background: #20ac62; } #mainnav .child-nav .caret { margin-left: 4px; } #mainnav .child-nav .submenu { position: absolute; top: 100%; left: 0; z-index: 1; display: none; background: #fff; min-width: 220px; } #mainnav .child-nav .submenu.in { min-width: 0; position: relative; display: block; } #mainnav .child-nav .submenu a { padding: 0.5rem 1rem; text-transform: none; font-weight: 400; } #mainnav .child-nav .submenu a:before { display: none; } #mainnav .child-nav .submenu a:hover, #mainnav .child-nav .submenu a:focus { background: #e9ecef; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div id="mainnav"> <button class="toggle-btn"> <span class="sr-only">Menu</span> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </button> <ul class="parent-nav"> <li><a href="">Home</a></li> <li class="child-nav"> <a href="">Properties <i class="fas fa-caret-down caret">˅</i></a> <ul class="submenu"> <li><a href="">For Sale</a></li> <li><a href="">For Rent</a></li> <li><a href="">List Your Property</a></li> </ul> </li> <li><a href="">Services</a></li> <li><a href="">Contact Us</a></li> <li class="child-nav"> <a href="">Company Group <i class="fas fa-caret-down caret">˅</i></a> <ul class="submenu"> <li><a href="">Company Investments</a></li> <li><a href="">Company Hotels</a></li> <li><a href="">Company Developers</a></li> <li><a href="">Company Internship</a></li> </ul> </li> </ul> </div>As you can see in the above snippet, there are a pretty big problem. Tapping either of the sub-menus will trigger class .in on both of the .submenus, which obviously isn't the intended behavior. And I also don't know how to trigger this script after a certain viewport width.
How do I fix this?
最满意答案
我已经修改了您的javascript以包含jQuery函数.next()以查找单击链接后面的.submenu ,而不是选择所有.submenu 。
$(document).ready(function() { $(".toggle-btn").click(function() { $(this).toggleClass("active"); $(".parent-nav").toggleClass("in"); }); $("#mainnav .child-nav > a").click(function() { $(this).toggleClass("active"); $(this).next(".submenu").toggleClass("in"); return false; }); });body { padding: 20px 50px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); border: 0; } #mainnav { position: relative; z-index: 1; float: right; padding: 1.3rem 1rem; padding-right: 0; } #mainnav li:last-of-type .submenu { left: auto; right: 0; } #mainnav .toggle-btn { display: block; background: #fff; border: none; width: 42px; height: 42px; padding: 0; cursor: pointer; } #mainnav .toggle-btn:hover, #mainnav .toggle-btn:focus { background: #e9ecef; } #mainnav .toggle-btn:active, #mainnav .toggle-btn.active { background: #20ac62; } #mainnav .toggle-btn:active .bar, #mainnav .toggle-btn.active .bar { background: #fff; } #mainnav .toggle-btn .bar { display: block; background: #000; width: 24px; height: 3px; margin: 0 auto; } #mainnav .toggle-btn .bar + .bar { margin-top: 5px; } #mainnav .parent-nav, #mainnav .submenu { margin: 0; padding: 0; list-style: none; } #mainnav .parent-nav { display: flex; flex-wrap: wrap; justify-content: space-between; visibility: hidden; opacity: 0; pointer-events: none; background: #f8f9fa; position: absolute; top: 100%; right: 0; width: calc(1110px - 120px); transition: all 0.3s; } @media (max-width: 1199px) { #mainnav .parent-nav { width: 220px; display: block; } } #mainnav .parent-nav.in { visibility: visible; opacity: 1; pointer-events: auto; } #mainnav .parent-nav a { position: relative; display: block; padding: 0.875rem 1.25rem; font-size: 0.875rem; font-weight: 700; color: #212529; line-height: 1.5rem; text-transform: uppercase; text-decoration: none; } #mainnav .parent-nav a:before { content: ''; position: absolute; left: 0; bottom: 0; right: 0; height: 4px; background: #20ac62; opacity: 0; transition: all 0.15s; } #mainnav .parent-nav a:hover:before, #mainnav .parent-nav a:focus:before { opacity: 1; } #mainnav .child-nav { position: relative; } #mainnav .child-nav:hover .submenu, #mainnav .child-nav:focus .submenu { display: block; } #mainnav .child-nav a.active { background: #20ac62; } #mainnav .child-nav .caret { margin-left: 4px; } #mainnav .child-nav .submenu { position: absolute; top: 100%; left: 0; z-index: 1; display: none; background: #fff; min-width: 220px; } #mainnav .child-nav .submenu.in { min-width: 0; position: relative; display: block; } #mainnav .child-nav .submenu a { padding: 0.5rem 1rem; text-transform: none; font-weight: 400; } #mainnav .child-nav .submenu a:before { display: none; } #mainnav .child-nav .submenu a:hover, #mainnav .child-nav .submenu a:focus { background: #e9ecef; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div id="mainnav"> <button class="toggle-btn"> <span class="sr-only">Menu</span> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </button> <ul class="parent-nav"> <li><a href="">Home</a></li> <li class="child-nav"> <a href="">Properties <i class="fas fa-caret-down caret">˅</i></a> <ul class="submenu"> <li><a href="">For Sale</a></li> <li><a href="">For Rent</a></li> <li><a href="">List Your Property</a></li> </ul> </li> <li><a href="">Services</a></li> <li><a href="">Contact Us</a></li> <li class="child-nav"> <a href="">Company Group <i class="fas fa-caret-down caret">˅</i></a> <ul class="submenu"> <li><a href="">Company Investments</a></li> <li><a href="">Company Hotels</a></li> <li><a href="">Company Developers</a></li> <li><a href="">Company Internship</a></li> </ul> </li> </ul> </div>I've modified your javascript to include the jQuery function .next() to find the .submenu that comes after the link you clicked on rather than selecting all .submenus.
$(document).ready(function() { $(".toggle-btn").click(function() { $(this).toggleClass("active"); $(".parent-nav").toggleClass("in"); }); $("#mainnav .child-nav > a").click(function() { $(this).toggleClass("active"); $(this).next(".submenu").toggleClass("in"); return false; }); });body { padding: 20px 50px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); border: 0; } #mainnav { position: relative; z-index: 1; float: right; padding: 1.3rem 1rem; padding-right: 0; } #mainnav li:last-of-type .submenu { left: auto; right: 0; } #mainnav .toggle-btn { display: block; background: #fff; border: none; width: 42px; height: 42px; padding: 0; cursor: pointer; } #mainnav .toggle-btn:hover, #mainnav .toggle-btn:focus { background: #e9ecef; } #mainnav .toggle-btn:active, #mainnav .toggle-btn.active { background: #20ac62; } #mainnav .toggle-btn:active .bar, #mainnav .toggle-btn.active .bar { background: #fff; } #mainnav .toggle-btn .bar { display: block; background: #000; width: 24px; height: 3px; margin: 0 auto; } #mainnav .toggle-btn .bar + .bar { margin-top: 5px; } #mainnav .parent-nav, #mainnav .submenu { margin: 0; padding: 0; list-style: none; } #mainnav .parent-nav { display: flex; flex-wrap: wrap; justify-content: space-between; visibility: hidden; opacity: 0; pointer-events: none; background: #f8f9fa; position: absolute; top: 100%; right: 0; width: calc(1110px - 120px); transition: all 0.3s; } @media (max-width: 1199px) { #mainnav .parent-nav { width: 220px; display: block; } } #mainnav .parent-nav.in { visibility: visible; opacity: 1; pointer-events: auto; } #mainnav .parent-nav a { position: relative; display: block; padding: 0.875rem 1.25rem; font-size: 0.875rem; font-weight: 700; color: #212529; line-height: 1.5rem; text-transform: uppercase; text-decoration: none; } #mainnav .parent-nav a:before { content: ''; position: absolute; left: 0; bottom: 0; right: 0; height: 4px; background: #20ac62; opacity: 0; transition: all 0.15s; } #mainnav .parent-nav a:hover:before, #mainnav .parent-nav a:focus:before { opacity: 1; } #mainnav .child-nav { position: relative; } #mainnav .child-nav:hover .submenu, #mainnav .child-nav:focus .submenu { display: block; } #mainnav .child-nav a.active { background: #20ac62; } #mainnav .child-nav .caret { margin-left: 4px; } #mainnav .child-nav .submenu { position: absolute; top: 100%; left: 0; z-index: 1; display: none; background: #fff; min-width: 220px; } #mainnav .child-nav .submenu.in { min-width: 0; position: relative; display: block; } #mainnav .child-nav .submenu a { padding: 0.5rem 1rem; text-transform: none; font-weight: 400; } #mainnav .child-nav .submenu a:before { display: none; } #mainnav .child-nav .submenu a:hover, #mainnav .child-nav .submenu a:focus { background: #e9ecef; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div id="mainnav"> <button class="toggle-btn"> <span class="sr-only">Menu</span> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </button> <ul class="parent-nav"> <li><a href="">Home</a></li> <li class="child-nav"> <a href="">Properties <i class="fas fa-caret-down caret">˅</i></a> <ul class="submenu"> <li><a href="">For Sale</a></li> <li><a href="">For Rent</a></li> <li><a href="">List Your Property</a></li> </ul> </li> <li><a href="">Services</a></li> <li><a href="">Contact Us</a></li> <li class="child-nav"> <a href="">Company Group <i class="fas fa-caret-down caret">˅</i></a> <ul class="submenu"> <li><a href="">Company Investments</a></li> <li><a href="">Company Hotels</a></li> <li><a href="">Company Developers</a></li> <li><a href="">Company Internship</a></li> </ul> </li> </ul> </div>
更多推荐
发布评论