当另一个 ul 被点击事件切换时关闭所有打开的 ul

Question

我有一个垂直下拉菜单，我正在使用 jQuery 切换到 open/close 子菜单。当用户单击父项时它工作正常（例如 'About' 子菜单打开，当他们再次单击它时子菜单再次关闭。但是，如果他们不单击父项（'About'）第二次关闭它但单击不同的父项（假设 'Industry'）以打开子菜单，两个子菜单（'About' 和 'Industry'）都可见。所以我需要它在单击 'Industry' 时自动关闭 'About'。这是代码：

<nav> 
<ul id="nav-list">
    <li class="nav-list_item nav-about><a href="#">About</a>
        <div id="about-drop">
            <ul>
                <li>...</li>
                <li>...</li>
                <li>...</li>
            </ul>
        </div>
    </li>

    <li class="nav-list_item nav-industry"><a href="#">Industry</a>
        <div id="industry-drop">
            <ul>
                <li>...</li>
                <li>...</li>
                <li>...</li>
            </ul>
        </div>
    </li>
    <li class="nav-list_item nav-application"><a href="#">Application</a>
        <div id="application-drop">
            <ul>
                <li>...</li>
                <li>...</li>
                <li>...</li>
            </ul>
        </div>
    </li>
</ul>

和 JavaScript:

 $('li.nav-about').click(function () {
        $(this).find('ul').toggle();
    });

    $(' li.nav-industry').click(function () {
        $("html, body").animate({ scrollTop: 0 }, "fast");
        $(this).find('ul').toggle();
    });
 $('li.nav-application').click(function () {
        $("html, body").animate({ scrollTop: 0 }, "fast");
        $(this).find('ul').toggle();
    });

我已经尝试过我在 Whosebug 上找到的不同东西，但无法让它工作。有什么建议吗？

Answer 1

demo

$('li.nav-about').click(function () {
    $(this).find('ul').toggle();
    $(this).siblings('li').find('ul').hide();
});

$(' li.nav-industry').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, "fast");
    $(this).find('ul').toggle();
    $(this).siblings('li').find('ul').hide();
});
$('li.nav-application').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, "fast");
    $(this).find('ul').toggle();
    $(this).siblings('li').find('ul').hide();
});

点击一个就隐藏另一个div。

Answer 2

我认为你可以像这样删除冗余代码：

 $('li.nav-list_item').click(function () {
    $('li.nav-list_item').find('ul').hide();
    $("html, body").animate({ scrollTop: 0 }, "fast");
    $(this).find('ul').toggle();
});

你可以用这个代替你的js。

Answer 3

$('#nav-list li').on('click', function() {
  $('#nav-list li').not(this).find('div').hide();
  $(this).find('div').toggle();
});

.nav-list_item > div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-list">
  <li class="nav-list_item nav-about"><a href="#">About</a>
    <div id="about-drop ">
      <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
  </li>

  <li class="nav-list_item nav-industry"><a href="#">Industry</a>
    <div id="industry-drop ">
      <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
  </li>
  <li class="nav-list_item nav-application"><a href="#">Application</a>
    <div id="application-drop ">
      <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
  </li>
</ul>

不需要如此复杂的处理程序。

当另一个 ul 被点击事件切换时关闭所有打开的 ul

Close all open ul when another ul is toggled by click event

html

javascript

css

jquery

toggle