How to close toggle when next list is toggled

user_13345208 0
Viewed 110

This is a multi-child dropdown menu, Actually I am trying to toggle a menu one at a time (i.e. only selected menu will show other should close).

Here is my code

HTML

<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
    <ul class="nav navbar-nav">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Master<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li class="dropdown-submenu">
                    <a class="test" tabindex="-1" href="#">MENU-A<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a tabindex="-1" href="#">A1-CHILD</a></li>
                        <li><a tabindex="-1" href="#">A2-CHILD</a></li>
                    </ul>
                </li>
                <li class="dropdown-submenu">
                    <a class="test" tabindex="-1" href="#">MENU-B<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a tabindex="-1" href="#">B1-CHILD</a></li>
                        <li><a tabindex="-1" href="#">B2CHILD</a></li>
                    </ul>
                </li>
                <li class="dropdown-submenu">
                    <a class="test" tabindex="-1" href="#">MENU-C <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-submenu">
                            <a class="test" href="#">C1-CHILD <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="/supplier/create">C1-A</a></li>
                                <li><a href="/supplier/index">C1-B</a></li>
                            </ul>
                        </li>
                        <li class="dropdown-submenu">
                            <a class="test" href="#">C2-CHILD <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="/weight-balance-map/create">C2-A</a></li>
                                <li><a href="/weight-balance-map/create">C2-B</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

JS:

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

CSS:

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

This didn't close after another menu toggles and the third level of submenu didn't flexible for the first answer. thanks,

css html jquery javascript
1 Answers

You need to get closest ul where click event has occur then using .not() exclude it from hiding and then simply use next("ul").toggle(); to show dropdown menu .

Demo code :

$(document).ready(function() {
  $(".dropdown-submenu a.test").on("click", function(e) {
    //get closest `li`-> ul 
    var selector = $(this).closest(".dropdown-submenu").find("ul");
    //hid all other li and ul
    $(".dropdown-submenu ul").not(selector).not(this.closest('ul')).hide()
    $(this).next("ul").toggle(); //show this a-> next ul
    e.stopPropagation();
    e.preventDefault();
  });
});
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
  <ul class="nav navbar-nav">
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Master<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li class="dropdown-submenu">
          <a class="test" tabindex="-1" href="#">MENU-A<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">A1-CHILD</a></li>
            <li><a tabindex="-1" href="#">A2-CHILD</a></li>
          </ul>
        </li>
        <li class="dropdown-submenu">
          <a class="test" tabindex="-1" href="#">MENU-B<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">B1-CHILD</a></li>
            <li><a tabindex="-1" href="#">B2CHILD</a></li>
          </ul>
        </li>
        <li class="dropdown-submenu">
          <a class="test" tabindex="-1" href="#">MENU-C <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li class="dropdown-submenu">
              <a class="test" href="#">C1-CHILD <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="/supplier/create">C1-A</a></li>
                <li><a href="/supplier/index">C1-B</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <a class="test" href="#">C2-CHILD <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="/weight-balance-map/create">C2-A</a></li>
                <li><a href="/weight-balance-map/create">C2-B</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

user_106064000
Related