單擊 jQuery 或 JavaScript 菜單下拉菜單

Question

現在，我正在嘗試構建一個垂直菜單，其下方將有一個下拉子菜單。

下面是我的 HTML 和我正在使用的 jQuery 函數：

 $(function() { $('#menusomething > li').click(function(e) { e.stopPropagation(); var $el = $('ul', this); $('#menusomething > li > ul').not($el).slideUp(); $el.stop(true, true).slideToggle(400); }); $('#menusomething > li > ul > li').click(function(e) { e.stopImmediatePropagation(); }); });

 <div id="navmenu"> <ul id="menusomething" style="padding-left:30px"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CHAPTERS</a></li> <ul class="submenu"> <li><a href="#">Dallas</a></li> <li><a href="#">Los Angeles</a></li> <li><a href="#">New York</a></li> <li><a href="#">Northern California</a></li> <li><a href="#">Orange County</a></li> <li><a href="#">Phoenix</a></li> <li><a href="#">San Diego</a></li> <li><a href="#">Washington DC</a></li> </ul> <li><a href="#">MEMBER SERVICES</a></li>

Answer 1

為看到這個的人找出答案。 首先必須將關閉的 li 標簽從章節移動到 .submenu 的末尾然后使用它，現在它可以正常工作了。

$(function() {
  $('#menusomething li > .submenu').parent().click(function() {
 var submenu = $(this).children('.submenu');
 if ( $(submenu).is(':hidden') ) {
 $(submenu).slideDown(400);
 } else {
 $(submenu).slideUp(400);
 }
});
});

Answer 2

下面的代碼完成了我相信你想要的：有一個<ul>元素，它是第一級<li>元素的nextElementSibling當它被點擊時滑動打開和關閉。 正如您在您想要的評論中提到的，由於添加了style="display: none;" ，它現在開始關閉style="display: none;" 到<ul> 。

注意：從用戶界面的角度來看，沒有子菜單或其他鏈接的<li>條目不應包含在<a>標簽中的文本。 使用<a>標簽，當點擊什么都不做時，用戶會認為它們是可點擊的。 這讓用戶感到困惑。 看起來您可能有一些是子菜單，一些是直接鏈接。 如果可能，兩種類型之間應該有一些視覺差異，以提示用戶點擊時會發生什么。

除了其他問題，您的 HTML 沒有任何內容可以匹配'#menusomething > li > ul'或'#menusomething > li > ul > li'選擇器。 具體來說，您沒有作為<LI>元素的子元素的<UL> <LI>元素。

 $(function() { $('#menusomething > li').click(function(e) { e.stopPropagation(); var nextSib = this.nextElementSibling; if(nextSib && nextSib.nodeName === 'UL') { //If we get here the nextSib exists and is a <UL> that immediately follows // the <LI> which was clicked. $(nextSib).slideToggle(400); } }); $('#menusomething > ul > li').click(function(e) { console.log('Clicked on chapter: ' + this.textContent); e.stopImmediatePropagation(); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="navmenu"> <ul id="menusomething" style="padding-left:30px"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CHAPTERS</a></li> <ul class="submenu" style="display: none;"> <li><a href="#">Dallas</a></li> <li><a href="#">Los Angeles</a></li> <li><a href="#">New York</a></li> <li><a href="#">Northern California</a></li> <li><a href="#">Orange County</a></li> <li><a href="#">Phoenix</a></li> <li><a href="#">San Diego</a></li> <li><a href="#">Washington DC</a></li> </ul> <li><a href="#">MEMBER SERVICES</a></li> </ul> </div>