单击 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>