I'm trying to set a tab active dynamically. I have search the net but the solutions is not working.Here is my code.
<ul id="memnav" class="nav nav-tabs">
<li class="active">
<a class="dropdown-toggle" data-toggle="tab" href="#publication-tab">
Publications
</a>
</li>
<li><a data-toggle="tab" href="#project-tab">Projects</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
About me
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a data-toggle="tab" href="#education-tab">Education</a></li>
<li><a data-toggle="tab" href="#career-tab">Career</a></li>
<li><a data-toggle="tab" href="#contact-tab">Contact</a></li>
</ul>
</li>
</ul>
and in the script
var active_tab = sessionStorage.getItem('active_tab');
if(active_tab){
$("#memnav").tabs().tabs( "option", "active", active_tab);
}
But it throws this error
Uncaught Error: jQuery UI Tabs: Mismatching fragment identifier.
I have also put the "ul" inside a "div" but it shows the same error
simply use addClass
add .eq() :https://api.jquery.com/eq/
$(document).ready(function(){
var i=0;//get from storrage
$("#memnav li").eq(i).addClass('active');
});
<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>
<ul id="memnav" class="nav nav-tabs">
<li>
<a class="dropdown-toggle" data-toggle="tab" href="#publication-tab">
Publications
</a>
</li>
<li><a data-toggle="tab" href="#project-tab">Projects</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
About me
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a data-toggle="tab" href="#education-tab">Education</a></li>
<li><a data-toggle="tab" href="#career-tab">Career</a></li>
<li><a data-toggle="tab" href="#contact-tab">Contact</a></li>
</ul>
</li>
</ul>
You can try this as well :)
$(document).ready(function(){
var active_tab = '#publication-tab';
$('#memnav').find('a[href="'+active_tab+'"]').parent().addClass('active');
});
<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>
<ul id="memnav" class="nav nav-tabs">
<li>
<a class="dropdown-toggle" data-toggle="tab" href="#publication-tab">
Publications
</a>
</li>
<li><a data-toggle="tab" href="#project-tab">Projects</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
About me
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a data-toggle="tab" href="#education-tab">Education</a></li>
<li><a data-toggle="tab" href="#career-tab">Career</a></li>
<li><a data-toggle="tab" href="#contact-tab">Contact</a></li>
</ul>
</li>
</ul>
Related
It works on my old navbar (but it's boostrap 3 and this project is on 5). The text overflows my navbar and causes the text/website to get extra space then what it's supposed to be showing. I need a genius to resolve this for me as i have been stumped on this for a long time.
Issue (images)
https://gyazo.com/c212a931d6770b77998cb3fea3ae87d1 i'm highlighting it as the text can't be seen due to white backround.
Trying to get working (old navbar) https://gyazo.com/66c482022e325cd9bd335ff666377474
Here is a JSfiddle to give an example plus the code i'm using. https://jsfiddle.net/yf90uxhc/2/
code:
document.addEventListener("DOMContentLoaded", function() {
// make it as accordion for smaller screens
if (window.innerWidth < 992) {
// close all inner dropdowns when parent is closed
document.querySelectorAll('.navbar .dropdown').forEach(function(everydropdown) {
everydropdown.addEventListener('hidden.bs.dropdown', function() {
// after dropdown is hidden, then find all submenus
this.querySelectorAll('.submenu').forEach(function(everysubmenu) {
// hide every submenu as well
everysubmenu.style.display = 'none';
});
})
});
document.querySelectorAll('.dropdown-menu a').forEach(function(element) {
element.addEventListener('click', function(e) {
let nextEl = this.nextElementSibling;
if (nextEl && nextEl.classList.contains('submenu')) {
// prevent opening link if link needs to open dropdown
e.preventDefault();
if (nextEl.style.display == 'block') {
nextEl.style.display = 'none';
} else {
nextEl.style.display = 'block';
}
}
});
})
}
// end if innerWidth
});
// DOMContentLoaded
<nav class="navbar navbar-expand-xl navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">Home</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Amarr Empire
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Caldari State
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Minmatar Republic
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Gallente Federation
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Guristas Pirates
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Angel Cartel
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Blood Raider Covenant
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
ORE
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Servant Sisters of Eve
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Mordu's Legion Command
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Sansha's Nation
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Serpentis
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Triglavian Collective
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
EDENCOM
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
</ul>
</div>
</div>
</nav>
You're looking to enable flexbox wrapping on the menu <ul>.
Change
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
To
<ul class="navbar-nav flex-wrap me-auto mb-2 mb-lg-0">
I have asp.net core MVC using bootbox.
I noticed that my dropdown-menu is not working, I tried everything like removing the js files and CSS files and re add them again but with no luck until I removed bootbox.js and bom! and the dropdown menu works fine.
here is my _Layout.cshtml:
<!DOCTYPE html>
<html lang="ar-sa" dir="rtl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - POS3</title>
<script src="~/js/bootbox.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
#*<script src="~/js/popper.min.js"></script>*#
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">POS<sup>3</sup></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<partial name="_LoginPartial" />
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="SelectedItems" asp-action="POSMain">POSMain</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<il class="dropdown-item">
<a class="dropdown-item" asp-area="" asp-controller="Product" asp-action="Create">Add New Product</a>
</il>
</ul>
</li>
<li class="nav-item dropdown">
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu action</a></li>
<li><a class="dropdown-item" href="#">Another submenu action</a></li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
</ul>
</ul>
</li>
</ul>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<div class="container" >
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2019 - POS3 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery-3.3.1.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/js/jquery.dataTables.min.js"></script>
<script src="~/js/DataTables/jquery.dataTables.min.js" defer></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
#RenderSection("Menu", required: false)
#RenderSection("ProductScript", false)
</body>
</html>
I think there is something in bootbox.js that is just stopping the dropdown to work as usual.
Assuming everything else in your project is built correctly, your layout has a bunch of issues that need to be fixed:
You've included jQuery quite a few times. Remove all but one.
You've loaded two different versions of bootstrap.js, and out of order.
You added bootbox.js as the first script, in the <head>. As we note
in our docs,
Bootbox needs to be loaded AFTER Bootstrap (since it's a Bootstrap extension).
So, removing the redundancies and fixing the script order, here's what you're left with (I spaced the scripts out at the end, so that you can see what's loaded):
<!DOCTYPE html>
<html lang="ar-sa" dir="rtl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - POS3</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">POS<sup>3</sup></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<partial name="_LoginPartial" />
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="SelectedItems" asp-action="POSMain">POSMain</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<il class="dropdown-item">
<a class="dropdown-item" asp-area="" asp-controller="Product" asp-action="Create">Add New Product</a>
</il>
</ul>
</li>
<li class="nav-item dropdown">
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu action</a></li>
<li><a class="dropdown-item" href="#">Another submenu action</a></li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
</ul>
</ul>
</li>
</ul>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<div class="container" >
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2019 - POS3 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery-3.3.1.js"></script>
<script src="~/js/jquery.dataTables.min.js"></script>
<script src="~/js/DataTables/jquery.dataTables.min.js" defer></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/bootbox.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
#RenderSection("Menu", required: false)
#RenderSection("ProductScript", false)
</body>
</html>
I'm attempting to build a nested dropdown menu. While I have managed to get it to open the next level, my implementation fails to close on click event.
https://jsfiddle.net/qw8fmhap/63/
javascript
const nodeList = document.querySelectorAll('.dropdown-menu a.dropdown-toggle');
nodeList.forEach((elem) => {
elem.addEventListener('click', (e) => {
e.stopPropagation();
let parent = elem.offsetParent;
if (!elem.nextElementSibling.classList.contains('show')) {
parent.classList.remove('show');
}
let subMenu = elem.nextElementSibling;
console.log(subMenu);
subMenu.classList.toggle('show');
elem.parentElement.classList.toggle('show');
console.log(elem.parentElement);
});
});
If you aren't planning to have multiple dropdown menus doing vastly different things, removing .dropdown-menu should fix the initial menu button.
As for the submenus closing on a parent close, you will need to iterate through those menus and close each one. Refer to the menusToClose.forEach logic here:
const nodeList = document.querySelectorAll('a.dropdown-toggle');
nodeList.forEach((elem) => {
elem.addEventListener('click', (e) => {
e.stopPropagation();
let subMenu = elem.nextElementSibling;
console.log(subMenu);
subMenu.classList.toggle('show');
if (!subMenu.classList.contains('show')) {
let menusToClose = subMenu.querySelectorAll('ul.dropdown-menu');
menusToClose.forEach((menuToClose) => {
menuToClose.classList.remove('show');
});
}
});
});
/*//Copy this css*/
.navbar-light .navbar-nav .nav-link {
color: rgb(64, 64, 64);
}
.btco-menu li>a {
padding: 10px 15px;
color: #000;
}
.btco-menu .active a:focus,
.btco-menu li a:focus,
.navbar>.show>a:focus {
background: transparent;
outline: 0;
}
.dropdown-menu .show>.dropdown-toggle::after {
transform: rotate(-90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Static navbar -->
<nav class="navbar navbar-expand-md navbar-light bg-light">
<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 class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu action</a></li>
<li><a class="dropdown-item" href="#">Another submenu action</a></li>
<li><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action aa</a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action bb</a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu action 2</a></li>
<li><a class="dropdown-item" href="#">Another submenu action 2</a></li>
<li><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action 1 3</a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action 2 3</a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu 3</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action 3 </a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
I'm using Bootstrap 3 with the list-inline class (I know I could use the default, but I don't want any of the default styling)
<nav class='main-nav'>
<ul class="list-inline">
<li><a href='#'>Test</a></li>
<li>
Test
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
</ul>
</li>
</ul>
</nav>
http://jsfiddle.net/9kVCZ/
But the dropdown doesn't appear under, it appears way at the bottom.
You need to add the class dropdown to your nav element.
<nav class='main-nav dropdown'>
<ul class="list-inline">
<li><a href='#'>Test</a></li>
<li>
Test
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
</ul>
</li>
</ul>
</nav>
Working Fiddle
If the goal of your code is to show the dropdown menu just by clicking on the second "Test", you should add the class dropdown to its parent <li>
<nav class='main-nav'>
<ul class="list-inline">
<li><a href='#'>Test1</a></li>
<li class="dropdown">
Test2
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
</ul>
</li>
</ul>
</nav>
Updated fiddle
I have a problem with my nav bar with bootstrap when using mobile devices (touch).
If I'm using a computer, the nav bar works fine, but if is a touch device the dropdown is hidden if try to select a option.
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse"
data-target=".nav-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="/webga/index/index">Inicio</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse">
<ul class="nav">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" data-target=".nav-collapse">
Cadastros <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Empresa</li>
<li>Empreendedor</li>
<li>Empreendimento</li>
<li>Atividades</li>
<li>Sub-Atividades</li>
<li><a
href="<c:url value="/responsavel/novoResponsavel"/>">Responsavel
Técnico</a></li>
<li>Documentações</li>
</ul></li>
</ul>
<ul class="nav">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown"> Consultas <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Processos</li>
<li>SubAtividades</li>
<li>Legislações</li>
<li>Documentos</li>
</ul></li>
</ul>
<ul class="nav">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown"> Solicitações <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="<c:url value="#"/>">Licensa
Ambiental/Florestal</a></li>
<li><a href="<c:url value="#"/>">Declaração de
isenção de licensa</a></li>
</ul></li>
</ul>
<ul class="nav">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown"> Relátorios <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="<c:url value="#"/>">Lista de
Atividades/Sub-Atividades</a></li>
<li><a href="<c:url value="#"/>">Solicitações por
Empreendedor</a></li>
<li><a href="<c:url value="#"/>">Solicitações por
Empreendimento</a></li>
<li><a href="<c:url value="#"/>">Solicitações por
Atividade</a></li>
<li><a href="<c:url value="#"/>">Estatística por
Atividade</a></li>
<li><a href="<c:url value="#"/>">Relação dos
Usuarios</a></li>
<li><a href="<c:url value="#"/>">Relação de
Empreendedores e seus Empreendimentos</a></li>
</ul></li>
</ul>
<ul class="nav">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown"> Ajuda <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Informações</li>
<li>Suporte</li>
</ul></li>
</ul>
<ul class="nav">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown"> Sistema <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="<c:url value="/usuario/alterarSenha"/>">Alterar
Senha</a></li>
</ul></li>
</ul>
<ul class="nav pull-right">
<li class="pull-right">Logout</li>
</ul>
</div>
</div>
</div>
</div>
Any help is appreciated. Thanks
You probably didn't update to the latest Bootstrap yet, did you?
I wrote a blog post including a temporary fix for this issue here:
http://forwebonly.com/fix-for-twitter-bootstrap-dropdown-on-ipad-and-iphone/
But when you update to the latest Bootstrap (version 2.2.2 or higher), this issue should be fixed, as you can read in their changelog.
Here's the rundown on what's new in this release:
...
Dropdowns: Temporary fix added for dropdowns on mobile to prevent them from closing early.