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>

on hover text in list text-decoration not working

I have an unordered list in which I have a link which has the same background color as the hover on text, so when the particular list is hovered the text is hidden. I am trying to remove that effect from the particular list so that text in it is not hidden.
I did the following:
<ul class="dropdown">
<li class="active">Home</li>
<li>
About
<ul>
<li>TEIA</li>
<li>Board Members</li>
<li>Agenda</li>
<li>Vision & Mission</li>
</ul>
</li>
<li>
Members
<ul>
<li>Membership Type</li>
<li>Code of Conduct</li>
<li>Membership Benefits</li>
<li>Register/Join</li>
</ul>
</li>
<li>
Resources
<ul>
<li>Upcoming Events</li>
<li>Previous Events</li>
<li>Press Release</li>
<li>Gallery</li>
</ul>
</li>
<li>Contact Us</li>
<li class="nyan" style="background-color: #00bfff; text-decoration: none;">
Log In
<ul>
<li>Admin</li>
<li>Members</li>
</ul>
</li>
</ul>
But still there is no change in it. Can anyone tell me what's wrong in my code?

Use particular class and then a:hover to target the text color. check snippet.
li.nyan a:hover {
color: #fff;
}
<ul class="dropdown">
<li class="active">Home
</li>
<li>About
<ul>
<li>TEIA</li>
<li>Board Members</li>
<li>Agenda</li>
<li>Vision & Mission</li>
</ul>
</li>
<li>Members
<ul>
<li>Membership Type</li>
<li>Code of Conduct</li>
<li>Membership Benefits</li>
<li>Register/Join</li>
</ul>
</li>
<li>Resources
<ul>
<li>Upcoming Events</li>
<li>Previous Events</li>
<li>Press Release</li>
<li>Gallery</li>
</ul>
</li>
<li>Contact Us</li>
<li class="nyan" style="background-color: #00bfff; text-decoration: none;">Log In
<ul>
<li>Admin</li>
<li>Members</li>
</ul>
</li>
</ul>

add some other color to the content when hovered.
.dropdown ul li:hover{
background: #0056b3;
color:white;
}
.dropdown ul li:hover a{
color:white;
}
<ul class="dropdown">
<li class="active">Home
</li>
<li>About
<ul>
<li>TEIA</li>
<li>Board Members</li>
<li>Agenda</li>
<li>Vision & Mission</li>
</ul>
</li>
<li>Members
<ul>
<li>Membership Type</li>
<li>Code of Conduct</li>
<li>Membership Benefits</li>
<li>Register/Join</li>
</ul>
</li>
<li>Resources
<ul>
<li>Upcoming Events</li>
<li>Previous Events</li>
<li>Press Release</li>
<li>Gallery</li>
</ul>
</li>
<li>Contact Us</li>
<li class="nyan" style="background-color: #00bfff; text-decoration: none;">Log In
<ul>
<li>Admin</li>
<li>Members</li>
</ul>
</li>
</ul>

Mobile menu dropdown issue

Here is my website: http://lowandheavy.com
The problem is that when website opens in mobile the 2nd menu with name "women" not working like menu "men".
It opens the dropdown but redirecting immediately to the submenu 3. Here is the code:
<ul class="nav-menu navigation-tier navigation-tier-primary" data-navigation-tier-primary>
<li class="has-slide-out header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="/" >Home</a>
</li>
<li class="dropdown has-slide-out header-navigation-item navigation-item-primary">
<a class="dropbtn navigation-link-primary" href="#">Men</a>
<div class="dropdown-content">
Tanks
T-shirts
</div>
</li>
<li class="dropdown has-slide-out header-navigation-item navigation-item-primary">
<a class="dropbtn navigation-link-primary" href="#">Women</a>
<div class="dropdown-content">
Leggings
Tanks
T-shirts
V-Neck
Unisex Tees
</div>
</li>
<li class="has-slide-out header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="/hats/" >Hats</a>
</li>
<li class="has-slide-out header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="/about/" >About</a>
</li>
<li class="has-slide-out header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="/contact-us/" >Contact</a>
</li>
<li class="has-slide-out header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="/news-feed/" >News</a>
</li>
</ul>

Lets DO the same on click
/***Add css in file***/
.dropdown.active .dropdown-content {
display: block;
}
/***Add Jquery in file***/
$('.navigation-link-primary').click(function(e){
$('.dropdown').removeClass('active');
$(this).parent().addClass('active');
});

By clicking on the menu name Men then same time click on menu name women you are facing issue that its not staying its redirecting
It is not the issue
It is happening because when you click on menu "Men" It opens a submenu of Men. then same time clicking on woman submenu of woman open and submenu of "Men" close so gap reduce between Men and Woman in directly you clicked upon one of the submenu of "Woman" (Maybe 2nd or 3rd submenu) not clicked upon the "Woman" menu and you are getting redirected.
Check below snippet
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav>
<ul class="nav">
<li>Link 1</li>
<li>Link 2 (toggle)
<ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.3</li>
</ul>
</li>
<li>Link 3 (toggle)
<ul class="nav collapse" id="submenu2" role="menu" aria-labelledby="btn-1">
<li>Link 3.1</li>
<li>Link 3.2</li>
<li>Link 3.3</li>
</ul>
</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</nav>
If you are directly open "woman" menu then you will not see your issue because at that time Submenu of "Men" menu is not open

$('.dropbtn.navigation-link-primary').click(function(e){
if($(this).hasClass('active')) {
$("a.dropbtn.navigation-link-primary").removeClass('active');
}
else {
$(this).addClass('active');
}
});
#media(max-width:850px) {
.dropdown:hover .dropdown-content {
display: none !important;
}
body.home .main-header-menu .header-navigation-item a {
width: 100% !important;
display: inline-block;
}
a.dropbtn.navigation-link-primary.active+div {
display: block !important;
}
}

Disable hover and allow click on submenu in twitter bootstrap

I had not much knowledge in html, I want to open the dropdown(dropdown-submenu) while click but now it opens when hover .
<div class="col-md-6 col-sm-8">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myMenu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myMenu">
<ul class="nav navbar-nav navbar-left">
<li>Home
</li>
<li>About Me
</li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-submenu">
<a class="dropdown-toggle disabled" href="#">Doctors<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>sub 1 </li>
<li>sub 2</li>
<li>sub 3</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>

Use jquery:
(function($){
$(document).ready(function(){
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
.marginBottom-0 {
margin-bottom: 0;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #555;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Active Link</li>
<li>Link</li>
<li class="dropdown">Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Dropdown Link 1</li>
<li>Dropdown Link 2</li>
<li>Dropdown Link 3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Link 4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 4.1</li>
<li>Dropdown Submenu Link 4.2</li>
<li>Dropdown Submenu Link 4.3</li>
<li>Dropdown Submenu Link 4.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">Dropdown Link 5
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.1</li>
<li>Dropdown Submenu Link 5.2</li>
<li>Dropdown Submenu Link 5.3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Submenu Link 5.4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.1</li>
<li>Dropdown Submenu Link 5.4.2</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Submenu Link 5.4.3
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.3.1</li>
<li>Dropdown Submenu Link 5.4.3.2</li>
<li>Dropdown Submenu Link 5.4.3.3</li>
<li>Dropdown Submenu Link 5.4.3.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">Dropdown Submenu Link 5.4.4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.4.1</li>
<li>Dropdown Submenu Link 5.4.4.2</li>
<li>Dropdown Submenu Link 5.4.4.3</li>
<li>Dropdown Submenu Link 5.4.4.4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Dropdown Link 1</li>
<li>Dropdown Link 2</li>
<li>Dropdown Link 3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Link 4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 4.1</li>
<li>Dropdown Submenu Link 4.2</li>
<li>Dropdown Submenu Link 4.3</li>
<li>Dropdown Submenu Link 4.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">Dropdown Link 5
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.1</li>
<li>Dropdown Submenu Link 5.2</li>
<li>Dropdown Submenu Link 5.3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Submenu Link 5.4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.1</li>
<li>Dropdown Submenu Link 5.4.2</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Submenu Link 5.4.3
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.3.1</li>
<li>Dropdown Submenu Link 5.4.3.2</li>
<li>Dropdown Submenu Link 5.4.3.3</li>
<li>Dropdown Submenu Link 5.4.3.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">Dropdown Submenu Link 5.4.4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.4.1</li>
<li>Dropdown Submenu Link 5.4.4.2</li>
<li>Dropdown Submenu Link 5.4.4.3</li>
<li>Dropdown Submenu Link 5.4.4.4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>

CSS Bootstrap - Align Navbar 'Icons' with edge of jumbotron

I am trying to align the selections in the navbar with the edges of the jumbotron, so that the rapidcodes logo aligns with the edge of the grey box in 'Newest Additions' and the 'login' button aligns with the right edge of the grey box.
See screenshot of current page:
Code:
td {
text-align: left;
vertical-align: central;
padding: 4px;
}
.products {
display: inline-block;
margin: 15px;
}
<nav class="navbar navbar-default" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.rapidcodes.co.uk"><img src="http://www.rapidcodes.co.uk/style/logo.png" width="200" height="25" alt="Logo"/></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Xbox<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PlayStation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PC<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Time Cards</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>

Try packing your code inside the external div with the class of 'container'.
<div class="container"><!--Pack your code inside the container-->
<nav class="navbar navbar-default" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.rapidcodes.co.uk"><img src="http://www.rapidcodes.co.uk/style/logo.png" width="200" height="25" alt="Logo"/></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Xbox<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PlayStation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PC<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Time Cards</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
</div><!--end container-->

Your content probably has a container .container. Also wrap your navbar with this.