Question

这应该是令人难以置信的简单，但经过近一个小时的研究，我找不到完全符合我需要的答案。我有一个包含子菜单和子子菜单的下拉菜单，我正在尝试对其进行编码，以便在单击一个<li>时（显示其子<ul>），所有其他兄弟{ {1}}关闭（正如您对任何导航菜单所期望的那样）。这是我尝试的代码之一，没有表现出所需的行为（兄弟子菜单不会消失）：

HTML：

<ul>

的Javascript ：

<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存在问题，请告诉我，因为我对它很新。

编辑：虽然我的JavaScript下面有几个有用的修复，但有人提供了一种非常简单的方法来在纯CSS中完成此操作而根本没有JavaScript，对于遇到类似问题的人来说，这是一个简单而通用的修复方法。我决定将那个标记为最佳答案。谢谢大家！

Answer 1

为什么不隐藏所有ul元素并仅显示孩子ul

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

Answer 2

看起来你几乎就在那里。您需要做的就是点击当前ul下的li并显示它。

＆＃13;

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

＆＃13;

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

＆＃13;

修改：我已更新代码，其中包含“点击”按钮＆＃39;功能因此当用户完全点击原始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>

隐藏兄弟<ul>的时候

3 个答案: