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>
Related
I need a menu, html+jquery where it must show all the menu in normal mode, when i go to responsive more only some menu must be visible and other menu must be under more where it must be generated automatically similar to this link
https://www.amazon.com/stores/Ozeri/node/2598028011
Suppose if zoom in or zoom out of browser I need to add some menu automatically to that more option generated.
PS: [If link does not work please copy paste it]
Check My source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Ozeri :: Ozeri Pro II Digital Kitchen Scale with Removable Glass Platform and Countdown Kitchen Timer (1 g to 12 lbs Capacity) </title>
<link rel="icon" type="image/ico" href="img/favicon.png" />
<!-- web-fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700" rel="stylesheet" type="text/css">
<!-- font-awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Style CSS -->
<link href="css/ozeri-style.css" rel="stylesheet">
<link href="css/quick-view-img.css" rel="stylesheet">
<!-- slider -->
<link href="css/thumbs2.css" rel="stylesheet" />
<link href="css/thumbnail-slider.css" rel="stylesheet" />
<script src="css/thumbnail-slider.js" type="text/javascript"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.popup-big-img { width: auto; height: 500px; text-align: center}
.popup-big-img img{ width: auto; height: 100%; }
.popup-small-img{width: 50px;height: 50px; margin:5px;float: left; border: 2px solid #ccc;}
.popup-small-img img{ width: 100%; height: 100%}
.modal-dialog.pro-popup{ width: 95%}
.popup-small-img:hover{border: 2px solid #004b91; cursor: pointer}
.popup-small-img-test{border: 2px solid #ff8f00;}
.modal-header.no-border{ border: none;}
h4.modal-title{ color: #000; font-size: 16px; font-weight: 400; margin: 10px 5px}
.a-row {margin-left: 0px; margin-top: 0px;margin-right: 10px;float: left; }
.color-select{float: left; width: 70%}
.a-form-label {font-weight: 700;}
.manufacturer img{ text-align: center; display: inline-table;}
.product-color{ width: 100%;}
</style>
</head>
<body>
<div class="container-inner">
<nav class="navbar m-menu navbar-default">
<div class="container-fluid container-inner">
<div class="search-input hidden-mobile" style="display: none">
<input class="form-control top-search-box" placeholder="Search" aria-label="Search" type="text">
</div>
<!-- Brand and toggle get grouped for better mobile display -->
<!--<a class="navbar-brand" href="index.html"><img src="img/logo.png" alt=""></a>-->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="#navbar-collapse-1">
<ul class="nav navbar-nav navbar-left main-nav">
<li>Barware</li>
<li class="dropdown dropdown-toggle"><a href="category.html" data-toggle="dropdown" title="Glassware">Glassware <span><i class="fa fa-angle-down"></i>
</span></a>
<ul class="dropdown-menu">
<li>Moderna Artisan Glassware</li>
<li>Serafina Artisan Glassware</li>
<li>Curva Artisan Glassware</li>
</ul>
</li>
<li>Kitchen Scales</li>
<li>Kitchen Accessories</li>
<li class="dropdown dropdown-toggle">
<a href="category.html" data-toggle="dropdown" title="Cookware">Cookware <span><i class="fa fa-angle-down"></i>
</span></a>
<ul class="dropdown-menu">
<li>Ceramic Earth Series</li>
<li>Stone Earth Series</li>
<li>Stainless Steel Series</li>
<li>Professional Series</li>
</ul>
</li>
<li>Oscillatting Fans</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
More <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-right">
<li>Bath and Personal Care</li>
<li>Novelty</li>
</ul>
</li>
</ul>
</div>
<!-- .navbar-collapse -->
</div>
</nav>
</div>
</body>
</html>
try to
$(document).ready(function(){
var item_width = $('#menu_ul li').width();
var item_count = ($( "#menu_ul li" ).length);
var nav_width_og = $('.menu').width();
var nav_width = $('.menu').width();
if ((item_width*(item_count+1)) > nav_width ){
$('#more').appendTo('body');
$('#more').hide();
}
for(var i = 0; i < item_count; i++) {
nav_width = $('.menu').width();
item_width = $('#menu_ul li').width();
item_count = ($( "#menu_ul li" ).length);
if (nav_width<(item_width*item_count)){
$('#menu_ul li').not('#more').last().appendTo($('.overflow'));
$('#more').appendTo($('#menu_ul'));
$('#more').show();
}
}
$(window).resize(function(){
nav_width = $('.menu').width();
item_width = $('#menu_ul li').width();
item_count = ($( "#menu_ul li" ).length);
if (nav_width<(item_width*item_count)){
$('#menu_ul li').not('#more').last().appendTo($('.overflow'));
$('#more').appendTo($('#menu_ul'));
$('#more').show();
}
if (nav_width>(item_width*item_count)+(item_width-1)){
$('.overflow li').last().appendTo($('#menu_ul'));
$('#more').appendTo($('#menu_ul'));
}
if (nav_width == nav_width_og ){
$('#more').appendTo('body');
$('#more').hide();
}
});
$('#more').click(function(){
$('.overflow').slideToggle();
});
});
.menu{
position:relative;
max-width:600px;
margin:0 auto;
background:red;
font-size:0px;
}
ul{
list-style:none;
padding:0;
}
li{
display:inline-block;
background:green;
font-size:16px;
width:100px;
text-align:center;
}
.overflow{
position:absolute;
right:0;
display:none;
}
.overflow li{
display:block;
background:yellow;
}
#more{
background:blue;
display:none;
float:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<ul id="menu_ul">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
<li>item11</li>
<li>item12</li>
<li id="more">more</li>
</ul>
<ul class="overflow">
</ul>
</div>
As like in your given amazon link, it has a menu named 'MORE'. 'MORE' has sub-menu 'Novelty' while in large screen/desktop.
If it goes in smaller screen like for mobile/tab screen sizes, if we click on 'MORE', a modal menu bar comes.
I think, you want like this.
To do this, you will need JS/jQuery.
Step 1: for large screen/desktop sizes, just CSS dropdown menu is OK. Just have that 'MORE' with sub-menu using ul/li, you might be using bootstarp.
Step 2: You can have a hidden div with a modal(bootstarp modal or any other modal) having menu items inside and a 'close' button to close the modal. On clcik 'MORE' link, just call the modal by JS.
You need to check smaller screen sizes by JS. Bootstap modal has both HTML tag attribute way or some methods to call and close.
bootstrap 4 modal doc: https://getbootstrap.com/docs/4.0/components/modal/
You can style that modal by CSS as you need. There are many jQuery modal plugin or can use bootstrap modal.
As you have asked for any dropdown for item2 and others.
this will work:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Barware</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Glassware</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kitchen Scales</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kitchen Accessories</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
cookware<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Osciallating Fans</a>
</li>
</ul>
</nav>
<br>
</div>
</body>
</html>
https://jsfiddle.net/sugandhnikhil/kdbnq2tx/
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>
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;
}
Hi developers , My Angular2 project i try bootstrap dropdown "Mail" is working but
second dropdown not working
Here is an example of nested dropdown.
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<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>
I have 2 dropdown menu items under single parent dropdown class. But when I click dropdown action 1 then it is showing the body of dropdown menu 2 items.
<!DOCTYPE html>
<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.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="container">
<h2>Dropdown Example</h2>
<p>The <strong>toggle</strong> method toggles the dropdown.</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">Dropdown Example 1
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>
<br>
<br>
<button class="btn btn-primary dropdown-toggle" id="menu2" type="button" data-toggle="dropdown">Dropdown Example 2
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>
</div><br>
<p><strong>Note:</strong> For dropdowns, you should always include the data-toggle="dropdown" attribute. Do not rely solely on the toggle method, as it may not work as expected in all browsers.</p>
</div>
<script>
$(document).ready(function(){
$(".dropdown-toggle").dropdown("toggle");
});
</script>
</body>
</html>
Here is the fiddle link: https://jsfiddle.net/ajay1008/jumpgkfc/
So I want to open their respective body dropdown-menus.
you must wrap each dropdown button in another .btn-group.
<div class="btn-group"> <button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" open'">Dropdown Example 1
<span class="caret"></span></button>...</div>
mycode(you can copy this code):
https://jsfiddle.net/rezajafari2a/c1yw3hbv/