在以下情况下隐藏兄弟姐妹<ul>

Question

这应该是难以置信的简单，但经过近一个小时的研究，我还没有找到一个完全符合我需要的答案。我有一个带子菜单和子菜单的下拉菜单，我正试图对其进行编码，以便当一个<li>被单击(以显示其子<ul>)时，所有其他兄弟姐妹<ul>的关闭(如您所期望的任何导航菜单)。这是我尝试过的不显示期望行为的代码片段之一(兄弟子菜单不会消失):

HTML:

<ul>
    <li><a href="#">Go to first item</a>
        <ul>1st item!</ul>
    </li>
    <li><a href="#">Go to second item</a>
        <ul>2nd item!</ul>
    </li>
    <li><a href="#">Go to third item</a>
        <ul>3rd item!</ul>
    </li>
</ul>

Javascript

:

$('li').click(function() { $("ul ul:visible").hide(); });

请让我知道，如果有一个问题与我的JavaScript，因为我是相当新的。

编辑:虽然有几个有用的修复我的JavaScript下面，有人提供了一个非常简单的方法来完成这在纯CSS没有JavaScript，这是如此简单和通用的修复任何人有类似的问题，我决定标记为最好的答案。谢谢大家!

Answer 1

为什么不隐藏所有的ul元素而只显示子ul

$('li').click(function() { 
   $("ul ul").hide();
   $("ul", this).show();
});

Answer 2

看起来你就快成功了。你所需要做的就是找到当前在点击的li下的ul，并显示它。

$('li').click(function() { 
    $("ul ul:visible").hide();
    $(this).find('ul').show();
});
$(document).mouseup(function(e) {
    var container = $('ul');
    if( !container.is(e.target) && container.has(e.target).length === 0 ) {
        container.find('ul:visible').hide();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li><a href="#">Go to first item</a>
        <ul>1st item!</ul>
    </li>
    <li><a href="#">Go to second item</a>
        <ul>2nd item!</ul>
    </li>
    <li><a href="#">Go to third item</a>
        <ul>3rd item!</ul>
    </li>
</ul>

编辑:我已经更新了代码，包括一个'click off'功能，所以当用户完全在原始parent ul之外单击时，菜单作为一个整体将关闭。

Answer 3

您可以使用纯CSS来完成此操作:

ul a:focus ~ ul, ul ul:hover {
  display: block;
}
ul ul {
  display: none;
}

<ul>
  <li><a href="#">Go to first item</a>
    <ul>1st item!</ul>
  </li>
  <li><a href="#">Go to second item</a>
    <ul>2nd item!</ul>
  </li>
  <li><a href="#">Go to third item</a>
    <ul>3rd item!</ul>
  </li>
</ul>