We Keep Coding

How to close toggle when next list is toggled

This is a multi-child dropdown menu, Actually I am trying to toggle a menu one at a time (i.e. only selected menu will show other should close).
Here is my code
HTML
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Master<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">MENU-A<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">A1-CHILD</a></li>
<li><a tabindex="-1" href="#">A2-CHILD</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">MENU-B<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">B1-CHILD</a></li>
<li><a tabindex="-1" href="#">B2CHILD</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">MENU-C <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" href="#">C1-CHILD <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>C1-A</li>
<li>C1-B</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">C2-CHILD <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>C2-A</li>
<li>C2-B</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
JS:
$(document).ready(function{
$(".dropdown-submenu a.test").on("click", function(e){
$(this).next("ul").toggle();
e.stopPropagation();
e.preventDefault();
});
});
CSS:
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
This didn't close after another menu toggles and the third level of submenu didn't flexible for the first answer.
thanks,

You need to get closest ul where click event has occur then using .not() exclude it from hiding and then simply use next("ul").toggle(); to show dropdown menu .
Demo code :
$(document).ready(function() {
$(".dropdown-submenu a.test").on("click", function(e) {
//get closest `li`-> ul
var selector = $(this).closest(".dropdown-submenu").find("ul");
//hid all other li and ul
$(".dropdown-submenu ul").not(selector).not(this.closest('ul')).hide()
$(this).next("ul").toggle(); //show this a-> next ul
e.stopPropagation();
e.preventDefault();
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Master<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">MENU-A<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">A1-CHILD</a></li>
<li><a tabindex="-1" href="#">A2-CHILD</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">MENU-B<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">B1-CHILD</a></li>
<li><a tabindex="-1" href="#">B2CHILD</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">MENU-C <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" href="#">C1-CHILD <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>C1-A</li>
<li>C1-B</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">C2-CHILD <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>C2-A</li>
<li>C2-B</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Problems with multi level bootstrap dropdown

As you can see in my snippet; the dropdowns show vertically downwards. Here are my queries.
How do I make my sub menu show to left or right rather than vertically downwards?
As of now this menu is disappear only if I click on the caret sign again. This can be tiresome from UX perspective. So I added the three commented lines that will make it dropdown disappear when clicked anywhere in documented; But on subsequent clicks the dropdown wont work. I know why it wont work but I cant find a way around.
Also multi level dropdowns are bringing an extra layer of complication i.e if it was just one dropdown we can show and hide as we wish. Since there are multiple dropdowns, the code just hides/unhides haphazardly.
Please suggest a way forward.
PS: Kindly provide a solution with bootstrap 3 and not 4.
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
//document.addEventListener("click", function () {
// $('.dropdown-menu:visible').addClass('hide');
// });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Dropdown 1 <span class="caret"></span></a>
<ul class="dropdown-menu multi-level">
<li><a tabindex="-1" href="/#">Laughing</a></li>
<li><a tabindex="-1" href="/#">Out</a></li>
<li><a tabindex="-1" href="/#">Loud</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">*********<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="/#">Just</a></li>
<li><a tabindex="-1" href="/#/1">Another</a></li>
<li><a tabindex="-1" href="/#/1">Sub</a></li>
<li><a tabindex="-1" href="/#/1">Menu</a></li>
</ul>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Dropdown 2 <span class="caret"></span></a>
<ul class="dropdown-menu multi-level">
<li><a tabindex="-1" href="/#">Laughing</a></li>
<li><a tabindex="-1" href="/#">Out</a></li>
<li><a tabindex="-1" href="/#">Loud</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">*********<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="/#">Just</a></li>
<li><a tabindex="-1" href="/#/1">Another</a></li>
<li><a tabindex="-1" href="/#/1">Sub</a></li>
<li><a tabindex="-1" href="/#/1">Menu</a></li>
</ul>
</ul>
</li>
</ul>
</nav>

I modified a few css properties on your dropdown menu, first I set top:0; so that the dropdown would appear at the top of the parent element. Then I set left:25%; this would make the dropdown menu appear a few spaces on the left of the parent element.
For the subsequent dropdowns, I set left:100%; so that they would appear on the right of the parent dropdown.
Instead of adding the class 'hide' everytime you want to close it, modify its css instead;
$('.dropdown-menu:visible').css('display','none');
I also added a code wherein it would hide all the other submenus if the clicked element isn't inside a multilevel dropdown.
Run the snippet;
$('.dropdown-submenu a.test').on("click", function(e) {
$(this).next('ul').toggle();
// the parent dropdown-submenu which is a li tag
var clickedDropdown = $(this).parent();
// the parent of the li tag which is a ul tag
var parentDropdown = $(this).parent().parent();
if (!parentDropdown.hasClass("multi-level")) {
// if the clicked element has a parent dropdown, hide all other submenus
$(".dropdown-menu").each(function() {
if ($(this).parent()[0] != clickedDropdown[0]) {
$(this).css("display", "none");
}
});
}
e.stopPropagation();
e.preventDefault();
});
document.addEventListener("click", function() {
$('.dropdown-menu:visible').css('display', 'none');
});
.dropdown-menu {
left: 25% !important;
top: 0 !important;
}
.dropdown-menu .dropdown-menu {
left: 100% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Dropdown 1 <span class="caret"></span></a>
<ul class="dropdown-menu multi-level">
<li><a tabindex="-1" href="/#">Laughing</a></li>
<li><a tabindex="-1" href="/#">Out</a></li>
<li><a tabindex="-1" href="/#">Loud</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">*********<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="/#">Just</a></li>
<li><a tabindex="-1" href="/#/1">Another</a></li>
<li><a tabindex="-1" href="/#/1">Sub</a></li>
<li><a tabindex="-1" href="/#/1">Menu</a></li>
</ul>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Dropdown 2 <span class="caret"></span></a>
<ul class="dropdown-menu multi-level">
<li><a tabindex="-1" href="/#">Laughing</a></li>
<li><a tabindex="-1" href="/#">Out</a></li>
<li><a tabindex="-1" href="/#">Loud</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">*********<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="/#">Just</a></li>
<li><a tabindex="-1" href="/#/1">Another</a></li>
<li><a tabindex="-1" href="/#/1">Sub</a></li>
<li><a tabindex="-1" href="/#/1">Menu</a></li>
</ul>
</ul>
</li>
</ul>
</nav>

Multi- level dropdown using BootStrap-4 navbar goes out of screen when dropsdown

i just can't get this to work.I uses BS4 for responsiveness. my navs are right aligned in the navbar. I tried so many things to position the submenu at the left of the parent menu... but then it does not display submenu. the same problem arises when Sub-submenu dropdowns
HTML code follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Style Sheets Attaches Here-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/multi-navbar.css">
<!-- Style Sheets Ends Here-->
</head>
<body>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
<img src="assets/logo.jpg" class="rounded" alt="Logo" style="width:40px;">
<a class="navbar-brand" href="#"> NavBar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNavDropdown" class="navbar-collapse collapse justify-content-end">
<ul class="navbar-nav nav-pills nav-fill">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown1</a>
<ul class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink">
<li>
<a class="dropdown-item" href="#">menu1</a>
</li>
<li>
<a class="dropdown-item" href="#">menu2</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown2</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">menu1</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Submenu 1</a>
</li>
<li>
<a class="dropdown-item" href="#">Submenu 2</a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">menu2/a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Submenu 1</a>
</li>
<li>
<a class="dropdown-item" href="#">Submenu 2</a>
</li>
</ul>
</li>
<li class="dropdown-divider"></li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Another</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Submenu 1</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Sub-submenu1</a>
</li>
<li>
<a class="dropdown-item" href="#">Sub-submenu1</a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Subsubmenu2</a>
</li>
<li>
<a class="dropdown-item" href="#">Subsubmenu2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown3</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li class="dropdown-submenu ">
<a class="dropdown-item dropdown-toggle" href="#">menu1</a>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<a class="dropdown-item" href="#">Submenu 1</a>
</li>
<li>
<a class="dropdown-item" href="#">Submenu 2</a>
</li>
</ul>
</li>
<li class="dropdown-divider"></li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Yet Another</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Submenu 1</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Sub1-submenu 1</a>
</li>
<li>
<a class="dropdown-item" href="#">Sub1-submenu 2</a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Sub2-submenu 1</a>
</li>
<li>
<a class="dropdown-item" href="#">Sub2-submenu 2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Register</a>
</li>
</ul>
</div>
</nav>
<!-- Navbar completed Here-->
<!-- Javascript Loads Here-->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS - multi-navbar.css
.navbar-nav li:hover > ul.dropdown-menu {
display: block;
}
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;left:100%;margin-top:-6px;
}
/* rotate caret on hover */
.dropdown-menu >li > a:hover:after {
text-decoration: underline;
transform: rotate(-90deg);
}
These are the codes i used other than Bootstrap-4
Please help me

Change the parent dropdowns to dropdown-menu-right and the CSS to position the submenu on the left instead of right...
.dropdown-submenu>.dropdown-menu {
top:0;left:-100%;margin-top:-6px;
}
https://www.codeply.com/go/DznMvv8PhP
Also make sure the HTML is properly structured (the code you posted is not).
Related: Bootstrap 3 dropdown sub menu missing

Navbar dropdown menu doesnot show the content when the navabar is collapsed

i have created a navbar with some links on it and some links have dropdown links. But now when I am reducing the screen size the navbar collapses but the when expanded the dropdown menu is not working.
This my collapse button code.
<a class="toggle-nav" href="#"><img src="../img/nav.png" /></a>
M Script goes like this
<script>
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
</script>
My navbar code is:
<div id="logo">
<a href="/" ><img src="../img/3d.png" class="image-responsive"/></a>
</div>
<div id="container">
<nav class="menu">
<ul class="active">
<li class="spots">SPOTS</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">PRODUCTS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="printers">3D PRINTERS</li>
<li class="scanners">3D SCANNERS</li>
<li class="consumable">FILAMENTS</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SERVICES
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="printing">PRINTING SERVICES</li>
<li class="printing">3D DESIGNING</li>
<
<li class="printing">3D SCANNING</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">LEARN
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="learn">WORKSHOPS</li>
<li class="learn">GUEST LECTURES</li>
<li class="learn">CORPORATE TRAINING</li>
</ul>
</li>
<li class="learn">CONTACT</li>
</ul>
<a class="toggle-nav" href="#"><img src="../img/nav.png" /></a>
</nav>
</div>

Showing DropDown list in twitter bootstrap doesn't work correctly

I have a two drop down list using twitter bootstrap, but I have a small problem .. when choosing the menu , the sub items appears , bu then in the next time don't .
Html code :
<ul class="nav nav-pills left">
<li class="dropdown" id="menu1">
<a class="dropdown-toggle" style="color:#fff;" data-toggle="dropdown" href="#menu1"><i class="icon icon-user icon-white">
</i> My Account <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Previouse Report</li>
<li>My Profile</li>
<li class="divider"></li>
<li>
<asp:LinkButton ID="lbtnLogout" runat="server" CausesValidation="false" ForeColor="Black">Log out</asp:LinkButton></li>
</ul>
</li>
<li class="dropdown active" id="menu2">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu2"><span class="badge-notification badge badge-error">
<asp:Label ID="lblMsgCount" CssClass="lblMsgCount" runat="server" Text=".."></asp:Label></span>
<i class="icon icon-envelope icon-white">
</i> Notificatons <span class="caret"></span></a>
<ul ID="divNewNotifications" class="dropdown-menu">
</ul>
</li>
</ul>
JavaScript code :
$('.dropdown-toggle').dropdown();
and included the required lib.
<script src="../bootstrap/js/bootstrap-dropdown.js" type="text/javascript"></script>
Here is the code on http://jsfiddle.net/zNVgq/2/