Question

我有这个多级菜单代码，如下所示。当其中一个菜单打开并且我想点击第二个菜单时，旧的子菜单不会自动关闭。

例如，我点击＆＃34;新下拉＆＃34; test1ddm将打开。当我点击＆＃34;下拉2＆＃34; test1ddm不是关闭，而是堆栈在test2ddm之后。

如何在点击其他菜单时将其关闭？

 <div class="container">                                      
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li class="dropdown-submenu">
        <a class="test" id="test1" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu" id="test1ddm">
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
        </ul>
      </li>
      <li class="dropdown-submenu">
        <a class="test" id="test2" tabindex="-1" href="#">Drop down 2 <span class="caret"></span></a>
        <ul class="dropdown-menu" id="test2ddm">
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>        
        </ul>
      </li>
    </ul>
  </div>
</div>

脚本

<script>
  $(document).ready(function(){
    $('.dropdown-submenu a.test').on("click", function(e){
      $(this).next('ul').toggle();
      e.stopPropagation();
      e.preventDefault();
    });
  });
</script>

Answer 1

您可能希望使用CSS执行此操作，但如果您想使用JS，则以下内容应该有效：

$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).parent().parent().find('.dropdown-menu').hide();
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});

在打开菜单中的任何项目之前，它会首先关闭同一菜单中的所有项目，然后打开您选择的项目。它也适用于多个级别（但为此您必须修改选择器）。

如何关闭其他子菜单onclick jquery

1 个答案: