CODEWITHSUNDEEP
javascriptjqueryhtmlcssmenu
Naren Verma
Naren Verma

Reputation: 2307

How to close previous opened sub menu when clicked on next submenu on click event

I have one menu with sub menu.I have to open a drop down menu when clicked and closes again on when clicked on other menu. My below code both the drop down displaying if I clicked on menu. I have to display only one drop down at a time. Would you help me in this?

Note In second li tag I am using div tag

$('.sub-menu').hide();
   $("li:has(ul)").click(function(){
     $("ul",this).slideDown();
  });
.menu ul.nav-menu{
  list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="menu">
<ul class="nav-menu">
	
<li class="main-list"><a href="#">home</a>

	<ul class="sub-menu">
		<li><a href="#">home1</a></li>
		<li><a href="#">home2</a></li>
	</ul>
</li>

<li class="main-list"><a href="#">service</a>
  <div class="square">
	 <div class="sub">
		<ul class="sub-menu">
			<li><a href="#">home1</a></li>
			<li><a href="#">home2</a></li>
		</ul>
	  </div>
	</div>
</li>

</ul>
</div>

Upvotes: 2

Views: 2900

Answers (3)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72299

Use slideUp() and slideDown() like below:-

$('.sub-menu').hide();
$("li:has(ul)").click(function(){
  $(".main-list").find('.sub-menu').slideUp();
  $(this).find('.sub-menu').slideDown();
});
.menu ul.nav-menu{
	list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="menu">
   <ul class="nav-menu">
      <li class="main-list"><a href="#">home</a>
        <ul class="sub-menu">
          <li><a href="#">home1</a></li>
          <li><a href="#">home2</a></li>
        </ul>
      </li>
      <li class="main-list"><a href="#">service</a>
          <div class="square">
            <div class="sub">
              <ul class="sub-menu">
                  <li><a href="#">home1</a></li>
                  <li><a href="#">home2</a></li>
              </ul>
            </div>
        </div>
      </li>
    </ul>
</div>

Upvotes: 2

Psi
Psi

Reputation: 6783

Keep track of the last opened sub menu in a variable and close it when you open another menu: 

var lastOpen = null;
$('.sub-menu').hide();
$("li:has(ul)").click(function(){
    if (lastOpen != null){
         lastOpen.hide();
         lastOpen = null;
    }
    lastOpen = $("ul",this).slideDown();
});

Upvotes: 2

kind user
kind user

Reputation: 41893

According to which element was clicked, it shows up the corresponding submenu.

$('.sub-menu').hide();
$(".main-list").click(function() {
  $(".main-list").find('.sub-menu').hide();
  $(this).find('.sub-menu').fadeIn();
});
.menu ul.nav-menu {
  list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="menu">
  <ul class="nav-menu">

    <li class="main-list"><a href="#">home</a>

      <ul class="sub-menu">
        <li><a href="#">home1</a></li>
        <li><a href="#">home2</a></li>
      </ul>
    </li>

    <li class="main-list"><a href="#">service</a>
      <div class="square">
        <div class="sub">
          <ul class="sub-menu">
            <li><a href="#">home1</a></li>
            <li><a href="#">home2</a></li>
          </ul>
        </div>
      </div>
    </li>

  </ul>
</div>

Upvotes: 1

Related Questions