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>
Related
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>
How to send the selected dropdown list item to the server along with the form data on pressing submit button?
html
<span class="dropdown" >
<button class="btn btn-default dropdown-toggle" name="ops" type="button" id="menu2" data-toggle="dropdown">Select Condition
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1" >
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Not Equals</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Equals</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Greater Than</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Less Than</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Contains</a></li>
</ul>
</span>
The easy way is create a input hidden, then pass value of dropdown option to it! See my code:
<html>
<head>
<title>12328354/calling-a-particular-php-function-on-form-submit</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form method="post" action="stacksubmit.html">
<span class="dropdown" >
<button class="btn btn-default dropdown-toggle" name="ops" type="button" id="menu2" data-toggle="dropdown">Select Condition
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1" name="dropdown">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Not Equals</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Equals</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Greater Than</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Less Than</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Contains</a></li>
</ul>
<input type="hidden" name="optionvalue" id="optionvalue">
</span>
<input type="submit" value="click">
</form>
<script>
$('.dropdown-menu a').click(function(){
$('#optionvalue').val($(this).text());
});
</script>
</body>
</html>
I have a drop-down list, the problem is, when I try to open one list after another, the first one still remains unclosed. How can I close one list while opening another
$(document).ready(function() {
$('.dropdown-submenu a.test').on("click", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<p class=" dropdown-toggle" type="" data-toggle="dropdown" style="padding: 15px 0px;font-size: 24px;"><i class="fas fa-bars"></i> CATEGORY</p>
<ul class="dropdown-menu">
<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>
<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>
You can't use toggle for multiple accordion menu style.
I have updated your HTML design with some classes for your accordion design. Add following codes in your file.
CSS
.closed{display:none;}
.opened{display:block;}
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<p class=" dropdown-toggle" type="" data-toggle="dropdown" style="padding: 15px 0px;font-size: 24px;"><i class="fas fa-bars"></i> CATEGORY</p>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu opened">
<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 opened">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
<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 closed">
<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 closed">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
jQuery
$(function(){
$('.dropdown-submenu a.test').on("click", function(e){
var ul = $(this).next('ul');
if(ul.hasClass('opened')){
ul.removeClass('opened').addClass('closed');
}else{
ul.addClass('opened').removeClass('closed');
}
if($(this).parents('ul').length == 1){
$(this).parents('ul').find('ul').not(ul).addClass('closed').removeClass('opened')
}
e.stopPropagation();
e.preventDefault();
});
});
demo : https://jsfiddle.net/zsyajqt8/10/
Basically what I have is 3 dropdown menus, and I need only one to be active, so that when I choose something from it, the rest should become active as well. So what I've done so far is I've added the disabled class and now I have the first one active, while the rest 3 - disabled. My question is - how to make them active as soon as I choose something from the first dropdown
$(document).ready(function () {
$('#Test #firstId .dropdown-menu li a').click(function () {
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>')
});
$('#Test #secondId .dropdown-menu li a').click(function () {
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>')
});
$('#Test #thirdId .dropdown-menu li a').click(function () {
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>')
});
$('#Test #fourthId .dropdown-menu li a').click(function () {
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>')
});
});
And here are my dropdowns:
<div class="btn-group" id="firstId">
<button class="btn btn-default dropdown-toggle" type="button"
data-toggle="dropdown">
Store
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="dropdown">
<div class="btn-group" id="secondId">
<button class="btn btn-default dropdown-toggle disabled" type="button"
data-toggle="dropdown">
Catalog
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="dropdown">
<div class="btn-group" id="thirdId">
<button class="btn btn-default dropdown-toggle disabled" type="button"
data-toggle="dropdown">
Categories
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">4</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="dropdown">
<div class="btn-group" id="fourthId">
<button class="btn btn-default dropdown-toggle disabled" type="button"
data-toggle="dropdown">
Products
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">4</a></li>
</ul>
</div>
</div>
</div>
</div>
JQUERY
$('#firstId ul.dropdown-menu li').on('click',function(){
$('.btn.btn-default.dropdown-toggle.disabled').removeClass('disabled');
});
on firstId select find all classes with disabled and remove class disabled
JSFIDDLE DEMO
Please find the jsFiddle below. I am trying to implement a simple Bootstrap dropdown button, but I am not able to achieve it.
Can someone please let me know what am i missing.
html
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
JS
$('.dropdown-toggle').dropdown();
$('#dropdownMenu1').dropdown('toggle');
Please find the fiddle link below:
http://jsfiddle.net/rohan2911/BVZ6G/
Your fiddle needed jQuery:
http://jsfiddle.net/isherwood/BVZ6G/1
Uncaught Error: Bootstrap requires jQuery bootstrap.min.js:6
Uncaught ReferenceError: $ is not defined