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

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">
Dropdown<span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Submenu-1<span class="caret"></span>
<ul class="dropdown-menu">
<li>
Item-1
</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();
});


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.


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">
Dropdown<span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Submenu-1<span class="caret"></span>
<ul class="dropdown-menu">
<li>
Item-1
</li>
<li>
Item-2
</li>
<li>
Item-3
</li>
</ul>
</li>
<li class="dropdown-submenu">
Submenu-2<span class="caret"></span>
<ul class="dropdown-menu">
<li>
Item-1
</li>
<li>
Item-2
</li>
<li>
Item-3
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div class="container">
</div>
</div>
<!-- /container -->
</body>
</html>

Related

how to make the dropdown appear in default structure

hello friends i have a drop down menu ,which appears and disappears on alternate clicks.
But when I click the list third time ,the entire list appears (multiple drops appears unclosed). How can I make the list appear back in default structure?
Here is my code. Please help.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<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.3.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="container">
<h2>Multi-Level Dropdowns</h2>
<p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
<p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function() {
$('.dropdown-submenu a.test').on("click", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>

You need to hide the sub-dropdowns when the main dropdown is closing.
You can do this by listening to the hide.bs.dropdown event.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<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.3.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="container">
<h2>Multi-Level Dropdowns</h2>
<p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
<p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function() {
$('.dropdown-submenu a.test').on("click", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
$('.dropdown').on('hide.bs.dropdown', function() {
$('.dropdown-submenu .dropdown-menu').hide();
});
</script>
</body>
</html>

Rotate Bootstrap dropdown caret on toggle and prevent close if clicked inside

I have the following snippet that rotates .caret on a dropdown-toggle click. This rotates the .caret without issue, however it also rotates all of the other .caret on the page. Will I need to write a click function for every individual .caret and .dropdown-toggle on the page or can I have one that works independently?
Also, is there a way in which I can stop the dropdown-menu closing when and item within it has been clicked?
$(document).ready(function() {
$(".dropdown-toggle").click(function() {
$(".caret").toggleClass('rotate-180');
});
});
ul {
list-style: none;
}
.caret {
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 1s;
}
.rotate-180 {
transform: rotate(-180deg);
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<ul>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
</body>

in bootstrap +v4 just add style:
.dropdown-toggle[aria-expanded="true"]:after {
transform: rotate(180deg);
}
/*for animation*/
.dropdown-toggle:after {
transition: 0.7s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<li class="nav-item dropdown" >
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdowns" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdowns">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html><!-- roiket -->

See below it works
Edit:
I updated my answer to a more better approach to cover all scenarios, and for the last thing you have asked in your OP about preventing the menu to close, can be done in 2 ways
Bind click event to the dropdown and prevent propagation if it is already open.
You have to remove the data-toggle="dropdown" attribute and implement open and closing of the menu yourself. But I think that would require more lines of code than the one used in the code snippet.
$(document).ready(function() {
$('.dropdown').on('hidden.bs.dropdown', function(e) {
$(this).find('.caret').toggleClass('rotate-180');
});
$('.dropdown').on('shown.bs.dropdown', function(e) {
$(this).find('.caret').toggleClass('rotate-180');
});
//this is to avoid the menu from closing if clicked inside the menu
$('body').on("click", ".dropdown-menu", function(e) {
$(this).parent().is(".open") && e.stopPropagation();
});
});
ul {
list-style: none;
}
.caret {
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 1s;
}
.rotate-180 {
transform: rotate(-180deg);
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<ul>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
</body>

In bootstrap 3 whenever you click on the dropdown list when it's opening, class="open" appears so I tried this code and it worked just fine!
.open>a>.caret{
transform: rotate(180deg);
transition: all ease-out 0.4s;
}

Try this
$(document).ready(function () {
$( ".dropdown-toggle" ).click( function() {
$(this).children(".caret").toggleClass('rotate-180');
});
$( ".dropdown-menu" ).click( function() {
$(this).siblings().children(".caret").toggleClass('rotate-180');
});
$(document).click(function(e){
if(!e.target.closest("ul") && $(".caret").hasClass("rotate-180")){
$(".caret").removeClass('rotate-180');
}
})
});
$(document).ready(function () {
$( ".dropdown-toggle" ).click( function() {
$(this).children(".caret").toggleClass('rotate-180');
});
$( ".dropdown-menu" ).click( function() {
$(this).siblings().children(".caret").toggleClass('rotate-180');
});
$(document).click(function(e){
if(!e.target.closest("ul") && $(".caret").hasClass("rotate-180")){
$(".caret").removeClass('rotate-180');
}
})
});
ul {
list-style: none;
}
.caret {
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 1s;
}
.rotate-180 {
transform: rotate(-180deg);
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<ul>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
</body>

Try this.
$(document).ready(function () {
$( ".dropdown-toggle" ).click( function(){
$(this).children(".caret").toggleClass('rotate-180');
});
});
$(document).on("click", function(event){
var $trigger = $(".caret");
if($trigger !== event.target && !$trigger.has(event.target).length){
$(".caret").removeClass('rotate-180');
}
});
ul {
list-style: none;
}
.caret {
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 1s;
}
.rotate-180 {
transform: rotate(-180deg);
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<ul>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
</body>

Caret icon don't want to go next to Menu Item

I am having a menu, but my icon doesn't want to go next to menu item.
I worked while i had this code
<li class="dropdown">
<a class="dropdown-toggle" data-over="dropdown" href="partners.php">Partners</a>
<span class="caret"></span>
</a>
</li>
I change it, cause I want a separate link when user clicks on link-menu-item and want to make my caret to work with drop-down, So ichange my to :
<li class="dropdown">
Partners
<a class="dropdown-toggle" data-hover="dropdown">
<span class="caret"></span>
</a>
</li>
I moved my dropdown-toogle with an <a> tag to the <span class='caret'> and now I have two <a> tags inside the <li> but the caret not coming next to text for no reason..
Any thoughts?
Here's a sample of my code
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
$('.dropdown-menu li a').click(function(){
$(this).parents('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collapse navbar-collapse btnCollapse"><div class="collapse navbar-collapse btnCollapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
Partners<a class="dropdown-toggle" data-hover="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>
<div class="container">
<div class="row">
<ul class="col-sm-4">
<li>Club</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li><i class="fa fa-sign-in" aria-hidden="true"></i> Sign in</li> </ul>
</div></div>
Hers a fiddle as well: https://fiddle.jshell.net/xjpt2p44/
Cause snippet display only in full mode

Add this css
.nav .dropdown > a {
display: inline-block;
}

How to close a collapsed bar when clicking outside my navigation bar?

I have a nested navigation bar in my site, and it already works, however, I want to close the collapsed bar when clicked outside the bar.
Here is the javascript code I have:
$(document).ready(function() {
$('#nav li').click(function() {
//slide up all the link lists
$(this).children('ul').slideToggle();
})
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="collapse navbar-collapse navbar-right" role="navigation">
<ul id="nav" class="nav navbar-nav">
<li class="current">Home
</li>
<li>About
<ul>
<li>Link1
</li>
<li>Link2
</li>
</ul>
</li>
<li>Etc
<ul>
<li>Link1
</li>
<li>Link2
</li>
<li>Link3
</li>
</ul>
</li>
<li>Etc2
<ul>
<li>Link1
</li>
<li>Link2
</li>
<li>Link3
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</nav>

you can use this code
$('body').on('click touchstart', function(e) {
if ($(".classname").is(":visible")) {
if ($(e.target).closest(".classname").length == 0 && !$(e.target).hasClass('active')) {
closeMobileMenu(menuobj);
}
}
});

What about something like this:
$(document).click(function(event) {
if(!$(event.target).closest('#nav').length) {
$('#nav li').children('ul').slideToggle();
}
});

Trouble showing content with jQuery's .show()

I have a click handler on the "top level" <li>s that I want to hide all the content below the <li>s and then show the content below the particular <li> that was clicked.
The hiding works, but the showing does not.
$('.menu li').click(function() {
$('.submenu').hide();
var myclass = $('submenu');
$(this).show($submenu)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button>Menu</button>
<ul class="menu">
<li>Football
</li>
<li>cricket
<ul class="submenu">
<li>Shane
</li>
<li>Waqar
</li>
<li>Waseem
</li>
<li>Akhtar
</li>
</ul>
</li>
<li>Hockey
</li>
<li>Baseball
<ul class="submenu">
<li>Shane
</li>
<li>Waqar
</li>
<li>Waseem
</li>
<li>Akhtar
</li>
</ul>
</li>
<div class="clear"></div>
</ul>
</div>

Try this.
It hides the submenu with CSS.
Then it toggles the submenu when you click the list item.
If you only want one submenu to be shown at once, uncomment the line in the js.
$('.menu li').has('.submenu').click(function(e) {
e.preventDefault();
$(this).find('.submenu').slideToggle();
});
.submenu {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button>Menu</button>
<ul class="menu">
<li>Football</li>
<li>cricket
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<li>Hockey</li>
<li>Baseball
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<div class="clear"></div>
</ul>
</div>

You should try this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button>Menu</button>
<ul class="menu">
<li>Football</li>
<li>cricket
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<li>Hockey</li>
<li>Baseball
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<div class="clear"></div>
</ul>
</div>
<script type="text/javascript">
$('.submenu').hide();
$(document).on("click",".menu li",function(){
$(this).find('.submenu').slideToggle();
});
</script>

You are using jQuery and there is toggle() function for show/hide toggle and use like this
$('.submenu').toggle();
and I fixed your script that doesn't work.
$('.menu li').click(function(){
$('.submenu').hide();
$(this).find('.submenu').show();
});
Working fiddle

Categories

Resources