Jquery Drop Down Menu. The Sub Menu Disappears When Clicked. So, How To Make The Submenu Stays When Clicked?

December 24, 2023 Post a Comment

I'm Using jquery to show the submenu when menu(members)clicked. The toggle works when I click the Member menu and the problem is, when I click the submenu it will disappear, so I w

Solution 1:

This is because the events on child bubble up to the parent when clicked, to stop this add a click event to the child element and call e.stopPropagation() to prevent bubbling up to the parent being .has-sub:

$(".has-sub ul").click(function(e){
    e.stopPropagation();
});

Fiddle Example

Solution 2:

Add a sub class to the ul from the li

Try:

<div id="container">
    <nav><ul><li><ahref="#">Walk-In</a></li><liclass="has-sub"><ahref="#">Members</a><ulclass="sub"><li><ahref="#">Subscr</a></li><li><ahref="#">asdasd</a></li><li><ahref="#">asdasd</a></li></ul></li><li><ahref="#">Sales</a></li><li><ahref="#">Inventory</a></li><li><ahref="#">Suppliers</a></li><li><ahref="#">Reports</a></li></ul></nav><divid="content">SOME CONTENT YAY</div>
</div>
  $('.has-sub').click(function(e){
       if ($(e.target).parents('.sub').length == 0 ){
        $(this).toggleClass('tap');
       }
    });

jsfiddle: https://jsfiddle.net/v9ynq7og/

Solution 3:

Try this. i have added id into main menu and while click check for target id and base on this you can perform appropriate action

Baca Juga

$(document).ready(function(e) {
  $('.has-sub').click(function(e) {
    if (e.target.id)
      $(this).toggleClass('tap')
  });

});

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300italic,300);
 * {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Open Sans';
}
a {
  text-decoration: none;
}
header {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #858585;
}
.logo {
  float: left;
  margin-top: 9px;
  margin-left: 15px;
}
.logoa {
  font-size: 1.3em;
  color: #070807;
}
.logoaspan {
  font-weight: 300;
  color: #1AC93A;
}
nav {
  width: 250px;
  height: calc(100% - 50px);
  background-color: #171717;
  float: left;
}
#content {
  width: : auto;
  margin-left: 250px;
  height: calc(100% - 50px);
  padding: 15px
}
navli {
  list-style: none;
}
navlia {
  color: #ccc;
  display: block;
  padding: 10px;
  font-size: 0.8em;
  border-bottom: 1px solid #0a0a0a;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}
navlia:hover {
  background-color: #030303;
  color: #fff;
  padding-left: 80px;
}
navulliul {
  display: none;
}
/*nav ul li:hover > ul{
    display: block;

}*/navulli.tap > ul {
  display: block !important;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><html><head><title>Dashboard</title><body><header><divclass="logo"><ahref="#">WORKOUT <span>FITNESS CENTER</span></a></div></header><divid="container"><nav><ul><li><ahref="#">Walk-In</a></li><liclass="has-sub"><ahref="#"id='id1'>Members</a><ul><li><ahref="#">Subscr</a></li><li><ahref="#">asdasd</a></li><li><ahref="#">asdasd</a></li></ul></li><li><ahref="#">Sales</a></li><li><ahref="#">Inventory</a></li><li><ahref="#">Suppliers</a></li><li><ahref="#">Reports</a></li></ul></nav><divid="content">
                SOME CONTENT YAY
            </div></div></body></html>

Solution 4:

I think you are looking for this...

 	$(document).ready(function(e)
    	{
    		$('.test').click(function(e){
    	   if($(this).hasClass("test1"))
             {
               e.stopPropagation();
             }else
               {
                $(this).toggleClass('tap');
               }
         });
    	});

**CSS**

    @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300italic,300);
    *{
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	font-family: 'Open Sans';
    }
    
    a{
    	text-decoration: none;
    }
    
    header{
    	width: 100%;
    	height: 50px;
    	border-bottom: 1px solid #858585;
    }
    
    .logo {
    	float: left;
    	margin-top: 9px;
    	margin-left: 15px; 	
    }
    
    .logoa{
    	font-size: 1.3em;
    	color: #070807;
    	
    }
    .logoaspan{
    	font-weight: 300;
    	color: #1AC93A;
    }
    
    nav{
    	width: 250px;
    	height: calc(100% - 50px);
    	background-color: #171717;
    	float: left;
    }
    
    #content {
    	width: :auto;
    	margin-left: 250px;
    	height: calc(100% - 50px);
    	padding: 15px
    }
    
    navli{
    	list-style: none;
    
    }
    
    navlia{
    	color: #ccc;
    	display: block;
    	padding: 10px;
    	font-size: 0.8em;
    	border-bottom: 1px solid #0a0a0a;
    	-webkit-transition: 0.2s;
    	-moz-transition: 0.2s;
    	-o-transition: 0.2s;
    	transition: 0.2s;
    }
    
    navlia:hover{
    	background-color: #030303;
    	color: #fff;
    	padding-left: 80px;
    }
    
    navulliul {
    	display: none;
    }
    
    /*nav ul li:hover > ul{
    	display: block;
    
    }*/navulli.tap > ul{
    	display: block;
    }

<html><head><title>Dashboard</title><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head><body><header><divclass="logo"><ahref="#">WORKOUT <span>FITNESS CENTER</span></a></div></header><divid="container"><nav><ul><li><ahref="#">Walk-In</a></li><liclass="has-sub test"><ahref="#">Members</a><ul><li><ahref="#"class='test test1'>Subscr</a></li><li><ahref="#"class='test test1'>asdasd</a></li><li><ahref="#"class='test test1'>asdasd</a></li></ul></li><li><ahref="#">Sales</a></li><li><ahref="#">Inventory</a></li><li><ahref="#">Suppliers</a></li><li><ahref="#">Reports</a></li></ul></nav><divid="content">
    			SOME CONTENT YAY
    		</div></div></body></html>

Solution 5:

Need to add a jquery function.

$('.has-sub ul').click(function(){
        returnfalse
    });

Here is the jsFiddle for your requirement

JavaScript Download