如何切換下拉導航菜單？
[英]How to toggle dropdown navigation menu?
問題描述
我的代碼出了點問題，這是應該做的，但是沒有錯。^^
例如，單擊“導航1”，向下滑動並漸入子導航，而不是單擊“導航2”，漸出子導航1和漸入子導航2。
這就是我的票價：
var nav = $('.nav li.mega');
nav.children('.subnav-container').slideUp(0);
nav.click(function (e) {
e.preventDefault();
nav.children('.subnav-container').slideUp(500);
$(this).children('.subnav-container').slideDown(500);
});
我的小提琴： http : //jsfiddle.net/rzf7w69u/78/
我希望你們能幫助我編寫代碼。
1 個解決方案
解決方案1
2 2018-09-19 12:13:24
共享代碼中存在多個問題。
- 您在公共類中綁定事件（也由其他元素共享）。
- 管理向上和向下滑動的邏輯。 這是您的代碼，希望對您有所幫助。 “祝您編程愉快。”
注意：我按照您的格式進行了編碼，因此可以進一步改進此代碼。
$(document).ready(function(){ $(".nav li.mega").hover(function(){ $(this).addClass("hover"); $(this).children(".subnav-container").addClass("hover"); },function(){ $(this).removeClass("hover"); $(this).children(".subnav-container").removeClass("hover"); }); var nav = $('.nav li.mega'); nav.children('.sibling').slideUp(0); nav.click(function (e) { e.preventDefault(); var ele=this; if( $(ele).children('.sibling').hasClass('open')){ $(ele).children('.sibling').removeClass('open').slideUp(500); } else { if(nav.children('.open').length) { var child=nav.children('.open'); $(child).removeClass('open').fadeOut(500,function(){ $(ele).children('.sibling').addClass('open').fadeIn(500); }); } else { $(ele).children('.sibling').addClass('open').slideDown(500); } } }); });
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <header> <nav class="navbar navbar-top mod_navigation " itemscope="" itemtype="http://schema.org/SiteNavigationElement"> <div class="ws-navbar-collapse pull-left"> <ul class="nav navbar-nav"> <li class="submenu mega ncol-3 sibling nav-item dropdown subnav"> <a class="" href="url" > <span itemprop="name">Nav 1</span> </a> <div class="subnav-container submenu mega ncol_4 sibling nav-item dropdown"> <div class="relative"> <ul class="nav sub-nav level-2"> <li class="submenu first subnav"> <a class=" " href="url" > <span itemprop="name">Sub nav 1.1</span> </a> <div class="subnav-container submenu break_4 last"> <div class="relative"> <ul class="nav sub-nav level-3"> <li class="first"> <a class=" " href="url" > <span itemprop="name">Sub Sub Nav</span> <span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a> </li> <li class=""> <a class=" " > <span itemprop="name">Sub Sub Nav</span> <span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a> </li> <li class=""> <a class=" " > <span itemprop="name">Sub Sub Nav</span> <span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a> </li> <li class=""> <a class=" "> <span itemprop="name">Sub Sub Nav</span> <span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a> </li> <div class="clear"></div> </ul> </div> </div> </li> <li class="submenu first subnav"> <a class=" " href="url" > <span itemprop="name">Sub nav 1.2</span> </a> <div class="subnav-container submenu break_4 last"> <div class="relative"> <ul class="nav sub-nav level-3"> <li class="first"> <a class=" " href="url" > <span itemprop="name">Sub Sub Nav</span> <span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a> </li> <li class=""> <a class=" " > <span itemprop="name">Sub Sub Nav</span> <span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a> </li> <li class=""> <a class=" " > <span itemprop="name">Sub Sub Nav</span> <span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a> </li> <li class=""> <a class=" "> <span itemprop="name">Sub Sub Nav</span> <span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a> </li> <div class="clear"></div> </ul> </div> </div> </li> <li class="submenu first subnav"> <a class=" " href="url" > <span itemprop="name">Sub nav 1.3</span> </a> <div class="subnav-container submenu break_4 last"> <div class="relative"> <ul class="nav sub-nav level-3"> <li class="first"> <a class=" " href="url" > <span itemprop="name">Sub Sub Nav</span> <span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a> </li> <li class=""> <a class=" " > <span itemprop="name">Sub Sub Nav</span> <span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a> </li> <li class=""> <a class=" " > <span itemprop="name">Sub Sub Nav</span> <span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a> </li> <li class=""> <a class=" "> <span itemprop="name">Sub Sub Nav</span> <span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a> </li> <div class="clear"></div> </ul> </div> </div> </li> </ul> </div> </div> </li> <li class="submenu mega ncol-3 sibling nav-item dropdown subnav"> <a class="" href="url" > <span itemprop="name">Nav 2</span> </a> <div class="subnav-container submenu mega ncol_4 sibling nav-item dropdown"> <div class="relative"> <ul class="nav sub-nav level-2"> <li class="submenu first subnav"> <a class=" " href="url" > <span itemprop="name">Sub nav 2.1</span> </a> <div class="subnav-container submenu break_4 last"> <div class="relative"> <ul class="nav sub-nav level-3"> <li class="first"> <a class=" " href="url" > <span itemprop="name">Sub Sub Nav</span> <span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a> </li> <li class=""> <a class=" " > <span itemprop="name">Sub Sub Nav</span> <span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a> </li> <li class=""> <a class=" " > <span itemprop="name">Sub Sub Nav</span> <span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a> </li> <li class=""> <a class=" "> <span itemprop="name">Sub Sub Nav</span> <span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a> </li> <div class="clear"></div> </ul> </div> </div> </li> <li class="submenu first subnav"> <a class=" " href="url" > <span itemprop="name">Sub nav 2.2</span> </a> <div class="subnav-container submenu break_4 last"> <div class="relative"> <ul class="nav sub-nav level-3"> <li class="first"> <a class=" " href="url" > <span itemprop="name">Sub Sub Nav</span> <span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a> </li> <li class=""> <a class=" " > <span itemprop="name">Sub Sub Nav</span> <span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a> </li> <li class=""> <a class=" " > <span itemprop="name">Sub Sub Nav</span> <span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a> </li> <li class=""> <a class=" "> <span itemprop="name">Sub Sub Nav</span> <span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a> </li> <div class="clear"></div> </ul> </div> </div> </li> <li class="submenu first subnav"> <a class=" " href="url" > <span itemprop="name">Sub nav 2.3</span> </a> <div class="subnav-container submenu break_4 last"> <div class="relative"> <ul class="nav sub-nav level-3"> <li class="first"> <a class=" " href="url" > <span itemprop="name">Sub Sub Nav</span> <span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a> </li> <li class=""> <a class=" " > <span itemprop="name">Sub Sub Nav</span> <span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a> </li> <li class=""> <a class=" " > <span itemprop="name">Sub Sub Nav</span> <span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a> </li> <li class=""> <a class=" "> <span itemprop="name">Sub Sub Nav</span> <span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a> </li> <div class="clear"></div> </ul> </div> </div> </li> </ul> </div> </div> </li> <li class="submenu mega ncol-3 sibling nav-item dropdown subnav"> <a class="" href="url" > <span itemprop="name">Nav 3</span> </a> <div class="subnav-container submenu mega ncol_4 sibling nav-item dropdown"> <div class="relative"> <ul class="nav sub-nav level-2"> <li class="submenu first subnav"> <a class=" " href="url" > <span itemprop="name">Sub nav 3.1</span> </a> </li> <li class="submenu first subnav"> <a class=" " href="url" > <span itemprop="name">Sub nav 3.2</span> </a> </li> <li class="submenu first subnav"> <a class=" " href="url" > <span itemprop="name">Sub nav 3.3</span> </a> </li> </ul> </div> </div> </li> </ul> </div> </nav> </header> </body> </html>
如何添加導航下拉菜單？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.