CODEWITHSUNDEEP
javascriptjqueryhtmlcssbootstrap-4
aleebek
aleebek

Reputation: 33

how to automatically close submenu on dropdown-menu in Bootstrap 4

I want submenu in my dropdown menu to be closed when dropdown menu closed. But now submenu remains open if I toggle dropdown menu again.

https://plnkr.co/edit/YUmUGHctRlypUq1BNA0p?p=preview

HTML 

    <nav id="sideNavBar">
      <ul class="nav nav-pills nav-stacked">
        <li class="dropdown">
          <a href="#" id="menu" data-toggle="dropdown" class="droptown-toggle">Dropdown<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li class="dropdown-submenu">
              <a href="#" class="test" data-toggle="dropdown">Submenu-1<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Item-1</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </nav>

JS

  $(document).ready(function() {
    var $links = $('.dropdown-submenu a.test').on("click", function(e) {
      var submenu = $(this).next();
        $subs.not(submenu).hide()
        submenu.toggle();
      //$(this).next('ul').toggle();
      e.stopPropagation();
      e.preventDefault();
    });
    var $subs = $links.next();

  });

Upvotes: 1

Views: 3839

Answers (2)

Abdullah Shoaib
Abdullah Shoaib

Reputation: 464

Try below code. Ignore 'Script error.' it is just snippet code bug. But my code is working fine.

$(document).ready(function() {
    var $links = $('.dropdown-submenu a.test').on("click", function(e) {
      var submenu = $(this).next();
        $subs.not(submenu).hide();

        submenu.toggle();
      //$(this).next('ul').toggle();
      e.stopPropagation();
      e.preventDefault();
    });
    var $subs = $links.next();

    $('.dropdown-toggle').on('click', function(e) {
      $('.dropdown-submenu .dropdown-menu').hide();
    });

  });
<!DOCTYPE html>
<html>
<head>
  <link data-require="bootstrap-css" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
  <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <style>
    body {
      padding-top: 60px;
    }
    
    .dropdown-submenu {
      position: relative;
    }
    
    .dropdown-submenu .dropdown-menu {
      top: 0;
      left: 100%;
      margin-top: -1px;
    }
    
    @media (max-width: 979px) {
      /* Remove any padding from the body */
      body {
        padding-top: 0;
      }
    }
  </style>

  <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script data-require="bootstrap" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>

</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-2">
        <nav id="sideNavBar">
          <ul class="nav nav-pills nav-stacked">


            <li class="dropdown">
              <a href="#" id="menu" data-toggle="dropdown" class="dropdown-toggle">Dropdown<span class="caret"></span></a>
              <ul class="dropdown-menu">

                <li class="dropdown-submenu">
                  <a href="#" class="test" data-toggle="dropdown">Submenu-1<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Item-1</a>
                    </li>
                    <li>
                      <a href="#">Item-2</a>
                    </li>
                    <li>
                      <a href="#">Item-3</a>
                    </li>
                  </ul>

                </li>
                <li class="dropdown-submenu">
                  <a href="#" class="test" data-toggle="dropdown">Submenu-2<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Item-1</a>
                    </li>
                    <li>
                      <a href="#">Item-2</a>
                    </li>
                    <li>
                      <a href="#">Item-3</a>
                    </li>
                  </ul>

                </li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </div>
    <div class="container">
      
    </div>
  </div>
    <!-- /container -->

</body>


</html>

Upvotes: 0

barro32
barro32

Reputation: 2708

You could do something like this

$('.droptown-toggle').on('click', function(e) {
  $('.dropdown-submenu .dropdown-menu').hide();
});

PS. I presume droptown-toggle is a typo but I'm using the class name you have.

Upvotes: 1

Related Questions