Question

现在，我正在尝试构建一个垂直菜单，其下方有一个下拉菜单。

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

＆＃13;

$(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();
    });
});

＆＃13;

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

＆＃13;

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>元素nextElementSibling的{{1}}元素在单击时打开和关闭。正如您在评论中提到的那样，由于将<li>添加到style="display: none;"，它现在开始关闭。

注意：从用户界面的角度来看，不具有子菜单的<ul>条目或其他链接不应包含<li>标记中的文本。使用<a>标记时，用户会认为它们是可点击的，而点击什么都不做。这使用户感到困惑。看来你可能有一些子菜单，有些是直接链接。如果可能的话，两种类型之间应该存在一些视觉差异，以便向用户提示他们点击时会发生什么。

除了其他问题，您的HTML也没有任何内容可与<a>或'#menusomething > li > ul'选择器匹配。具体来说，您没有'#menusomething > li > ul > li'元素是<UL>元素的子元素。

＆＃13;

<LI>

＆＃13;

$(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();
    });
});

＆＃13;

单击jQuery或JavaScript菜单

2 个答案: