javascript - jQuery 的简单子(monad)菜单故障

Question

我的网站上有一个简单的菜单 - 当我单击主链接时，它会打开一个子菜单。但是，如果我单击另一个主链接，它不会关闭原始子菜单。我该如何解决这个问题？

用例子描述可能更容易 - 点击Projects，然后点击More Projects:http://jsfiddle.net/oxg7e07c/

$('#menu-primary-menu>li>a').click(function() {
  $(this).next().toggle();
  // if there is any other element after a the  use
  // $(this).parent().find('ul').toggle();
  // also if you need any better effect then use
  // slideToggle() or fadeToggle instead of toggle()
});

#menu-primary-menu>li>ul {
  display: none
}
#menu-primary-menu {
  background-color: #eee;
  width: 200px;
}
#menu-primary-menu {
  position: relative;
}
#menu-primary-menu ul {
  width: 200px;
  background-color: red;
  position: absolute;
  margin-top: 0;
  top: 0;
  left: 250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="menu-primary-menu-container">
  <ul id="menu-primary-menu" class="menu">
    <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-27"><a href="#">Projects</a>
      <ul>
        <li id="menu-item-26" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-26"><a href="/category/projects/residential/">Residential</a>
        </li>
        <li id="menu-item-24" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="/category/projects/private/">Private</a>
        </li>
      </ul>
    </li>


    <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-27"><a href="#">More Projects</a>
      <ul>
        <li id="menu-item-26" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-26"><a href="/category/projects/residential/">Residential2</a>
        </li>
        <li id="menu-item-24" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="/category/projects/private/">Private</a>
          <li id="menu-item-24" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="/category/projects/private/">Private</a>
            <li id="menu-item-24" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="/category/projects/private/">Private</a>
            </li>
      </ul>
      </li>

  </ul>
</div>

Answer 1

当打开一个新的子菜单时，其他菜单项应该被隐藏。您可以通过在事件处理程序中添加以下行来使用它。

$(this) // The element that is clicked i.e. a
    .parent() // The direct parent of the clicked element i.e. li
    .siblings() // All the sibling elements
    .find('ul').hide(); // Find will search for the `ul` inside the siblings and hide it

演示:

$('#menu-primary-menu>li>a').click(function() {
  $(this).parent().siblings().find('ul').hide();
  $(this).next().toggle();
});

#menu-primary-menu>li>ul {
  display: none
}
#menu-primary-menu {
  background-color: #eee;
  width: 200px;
}
#menu-primary-menu {
  position: relative;
}
#menu-primary-menu ul {
  width: 200px;
  background-color: red;
  position: absolute;
  margin-top: 0;
  top: 0;
  left: 250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="menu-primary-menu-container">
  <ul id="menu-primary-menu" class="menu">
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-27"><a href="#">Projects</a>
      <ul>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-26"><a href="/category/projects/residential/">Residential</a>
        </li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="/category/projects/private/">Private</a>
        </li>
      </ul>
    </li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-27"><a href="#">More Projects</a>
      <ul>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-26"><a href="/category/projects/residential/">Residential2</a>
        </li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="/category/projects/private/">Private</a>
        </li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="/category/projects/private/">Private</a>
        </li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="/category/projects/private/">Private</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

---

• id 在 DOM 中应该是唯一。如果您希望多个元素具有相同的行为，请使用类而不是 id(您已经拥有)。我已经从上面的演示/代码段中删除了重复的 ID。

• 第二个子菜单中的 li 元素缺少结束标记。

• 我还建议您使用 slideUp/slideDown/slideToggle 或 fadeIn/fadeOut/fadeToggle 来实现更流畅的动画/过渡。

  <

动画演示: Slide Effect Fade Effect

更进一步，您还可以将这两个语句链接起来

// http://jsfiddle.net/tusharj/neaec98t/3/
$(this) // Clicked anchor element
    .next() // Immediate next sibling
        .toggle() // Toggle the visibility
    .end() // Go back to the previous context, the context is changed when used `next()`
    .parent()
    .siblings()
        .find('ul')
        .hide();