Reputation: 21

How can I close a submenu automatically by clicking on other items?

I have tried this, and everything is OK except second level sub-menus it doesn't close automatically when i choose another item's sub-menus gor example when i choose page1-3 and then page1-4 items of the 1-3 still remain in page until i click on them again

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>


    @media only screen and (min-width: 500px) {
    nav{float:right;
    }
    li{
     float:right !important;
     text-align:right;
     direction:rtl ;
    }
    .dropdown-menu{
    right:0 !important;
    }
                                              }
       nav{text-align:right; }
       li{text-align:right; direction:rtl;}
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    margin-right: 100%;
    margin-top: -1px;
}
</style>

</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>

            <li class="dropdown-submenu">
            <a class="test" href="#">Page 1-3<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">3rd level dropdown</a></li>
              <li><a href="#">3rd level dropdown</a></li>
            </ul>
            </li>

            <li class="dropdown-submenu">
            <a class="test" href="#">Page 1-4<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">4rd level dropdown</a></li>
              <li><a href="#">4rd level dropdown</a></li>
            </ul>
            </li>

          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>

    </div>
  </div>
</nav>

  <script>

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

</script>

</body>
</html>

Upvotes: 0

Answers (2)

Rajesh Karunakaran

Reputation: 169

Add this to your script:

$('.dropdown-submenu > ul').hide();

solved code is:

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

Upvotes: 0

Curiousdev

Reputation: 5788

What you can do is first on click of sub-menu hide all menu inside submenu than toggle ul find more in below snippet

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>


    @media only screen and (min-width: 500px) {
    nav{float:right;
    }
    li{
     float:right !important;
     text-align:right;
     direction:rtl ;
    }
    .dropdown-menu{
    right:0 !important;
    }
                                              }
       nav{text-align:right; }
       li{text-align:right; direction:rtl;}
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    margin-right: 100%;
    margin-top: -1px;
}
</style>

</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>

            <li class="dropdown-submenu">
            <a class="test" href="#">Page 1-3<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">3rd level dropdown</a></li>
              <li><a href="#">3rd level dropdown</a></li>
            </ul>
            </li>

            <li class="dropdown-submenu">
            <a class="test" href="#">Page 1-4<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">4rd level dropdown</a></li>
              <li><a href="#">4rd level dropdown</a></li>
            </ul>
            </li>

          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>

    </div>
  </div>
</nav>

  <script>

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

</script>

</body>
</html>

Upvotes: 1

How can I close a submenu automatically by clicking on other items?

Answers (2)

Related Questions