由jquery控制的多級html菜單

Question

我正面臨一個多級菜單的問題。 我需要jQuery來顯示或隱藏當前選中的子菜單，並保持其他子菜單沒有變化。 我對JQuery還不是很熟練，所以任何幫助都會受到高度贊賞。 我在這里與你分享我所擁有的一切。 提前致謝！

我想提一下，我在StackOverflow上找到了一個部分工作的例子。 經過一些調試后，我意識到var mobileMenu.css返回undefined ，這使得代碼有時會起作用。

 var test1 = $('ul.hdrMenu li'); test1.on( 'click', function(e) { var mobileMenuItem = $(e.target).parent().find( '> ul.sub-menu' ); if( **typeof mobileMenuItem.css('display') === "undefined"** ) { mobileMenuItem = $(e.target).parent().parent().find( '> ul.sub-menu' ); } if( mobileMenuItem.css('display') == 'none' ) { e.preventDefault(); mobileMenuItem.slideDown(); e.stopPropagation(); } else if( mobileMenuItem.css('display') == 'block' ) { e.preventDefault(); mobileMenuItem.slideUp(); e.stopPropagation(); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="hdrMenu"> <li><a href="#">Inicio</a></li> <li><a href="#">Servicios</a> <ul class="sub-menu"> <li><a href="#">L1</a></li> <li><a href="#">L2</a> <ul class="sub-menu"> <li><a href="#">L2-1</a></li> <li><a href="#">L2-2</a></li> </ul> </li> <li><a href="#">L3</a></li> <li><a href="#">L4</a> <ul class="sub-menu"> <li><a href="#">L4-1</a></li> <li><a href="#">L4-4</a></li> </ul> </li> </ul> </li> <li><a href="#">Acerca de</a> <ul class="sub-menu"> <li><a href="#">Sub1</a></li> <li><a href="#">Sub2</a></li> <li><a href="#">Sub3</a></li> <li><a href="#">Sub4</a></li> </ul> </li> <li><a href="#">Contacto</a></li> </ul> 

Answer 1

代碼工作得很好我認為你只需刪除父選擇器.hdrNav它必須像：

var test1 = $('ul.hdrMenu li');

或者您可以將選擇器保留為原樣，並使用類hdrNav添加父div。

 var test1 = $('ul.hdrMenu li'); test1.on('click', function(e) { var mobileMenu = $(e.target).parent().find('> ul.sub-menu'); if (mobileMenu.css('display') == 'none') { e.preventDefault(); mobileMenu.slideDown(); e.stopPropagation(); } else if (mobileMenu.css('display') == 'block') { e.preventDefault(); mobileMenu.slideUp(); e.stopPropagation(); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="hdrMenu"> <li><a href="#">Inicio</a></li> <li><a href="#">Servicios</a> <ul class="sub-menu"> <li><a href="#">L1</a></li> <li><a href="#">L2</a> <ul class="sub-menu"> <li><a href="#">L2-1</a></li> <li><a href="#">L2-2</a></li> </ul> </li> <li><a href="#">L3</a></li> <li><a href="#">L4</a> <ul class="sub-menu"> <li><a href="#">L4-1</a></li> <li><a href="#">L4-4</a></li> </ul> </li> </ul> </li> <li><a href="#">Acerca de</a> <ul class="sub-menu"> <li><a href="#">Sub1</a></li> <li><a href="#">Sub2</a></li> <li><a href="#">Sub3</a></li> <li><a href="#">Sub4</a></li> </ul> </li> <li><a href="#">Contacto</a></li> </ul>