I have a dropdown that contains a div which contains a dropdown of its own. As soon as I click the inner dropdown, the parent dropdown closes. How to prevent the parent dropdown from closing ? And how to solve the same problem for multiple nested dropdowns ?
Code:
<div class="dropdown selectDropdownDiv">
<a data-toggle="dropdown" href="#" class="btn selectDropdown">--<span class="caret pull-right"></span></a>
<div class="dropdown-menu keep_open" role="menu" aria-labelledby="dLabel" id="keywordDropdown">
<div class="dropdown selectDropdownDiv">
<a data-toggle="dropdown" href="#" class="btn selectDropdown">--<span class="caret pull-right"></span></a>
<ul class="dropdown-menu keep_open" role="menu" aria-labelledby="dLabel">
<li class="checkbox marginl5">
<label>
<span class="checkLabel">Source X</span><input type="checkbox">
</label>
</li>
<li class="checkbox marginl5">
<label>
<span class="checkLabel">Source X</span><input type="checkbox">
</label>
</li>
</ul>
</div>
</div>
</div>
I am using Twitter Bootstrap. Any help would be appreciated.
This should work. It stop the propagation of the click event to the bootstrap event that controls hiding the menu.
$("#parent-element").on("click", ".dropdown-menu", function (e) {
$(this).parent().is(".open") && e.stopPropagation();
});
Related
I use a bootstrap dropdown as a shoppingcart. In the shopping cart is a 'remove product' button (a link). If I click it, my shoppingcart script removes the product, but the menu fades away. Is there anyway way to prevent this? I tried e.startPropagation, but that didn't seem to work:
<div id="shoppingcart" class="nav-collapse cart-collapse">
<ul class="nav pull-right">
<li class="dropdown open">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Totaal:
€ 43,00</a>
<ul class="dropdown-menu">
<li class="nav-header">Pakketten</li>
<li>
<span class="quantity">1x</span>
<span class="product-name">Test Product </span>
<span class="product-remove"><a class="removefromcart" packageid="4" href="#">x</a>
</span></li>
<li>Total: € 43,00</li>
<li>Checkout</li>
</ul>
</li>
</ul>
As you can see tha element with class="dropwdown-toggle" made it a dropdown. Another idea was that I just reopen it on clicking programmatically. So if someone can explain me how to programmatically open a Bootstrap dropdown, it would help well!
Try removing the propagation on the button itself like so:
$('.dropdown-menu a.removefromcart').click(function(e) {
e.stopPropagation();
});
Edit
Here is a demo from the comments with the solution above:
http://jsfiddle.net/andresilich/E9mpu/
Relevant code:
JS
$(".removefromcart").on("click", function(e){
var fadeDelete = $(this).parents('.product');
$(fadeDelete).fadeOut(function() {
$(this).remove();
});
e.stopPropagation();
});
HTML
<div id="shoppingcart" class="nav-collapse cart-collapse">
<ul class="nav pull-right">
<li class="dropdown open">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Totaal:
€ 43,00</a>
<ul class="dropdown-menu">
<li class="nav-header">Pakketten</li>
<li class="product">
<span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
<span class="product-name">Test Product </span>
<span class="quantity"><span class="badge badge-inverse">1</span></span>
</li>
<li class="product">
<span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
<span class="product-name">Test Product </span>
<span class="quantity"><span class="badge badge-inverse">10</span></span>
</li>
<li class="product">
<span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
<span class="product-name">Test Product </span>
<span class="quantity"><span class="badge badge-inverse">8</span></span>
</li>
<li class="product">
<span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
<span class="product-name">Test Product </span>
<span class="quantity"><span class="badge badge-inverse">3</span></span>
</li>
<li class="product">
<span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
<span class="product-name">Test Product </span>
<span class="quantity"><span class="badge badge-inverse">4</span></span>
</li>
<li class="divider"></li>
<li>Total: € 43,00</li>
<li>Checkout</li>
</ul>
</li>
</ul>
This answer is just a sidenote to the accepted answer. Thanks to both the OP and Andres for this Q & A, it solved my problem. Later, however, I needed something that worked with dynamically added items in my dropdown. Anyone coming across this one might also be interested in a variation Andres' solution that works both with the initial elements as well as elements added to the dropdown after the page has loaded:
$(function() {
$("ul.dropdown-menu").on("click", "[data-keepOpenOnClick]", function(e) {
e.stopPropagation();
});
});
Or, for dynamically created dropdown menus:
$(document).delegate("ul.dropdown-menu [data-keepOpenOnClick]", "click", function(e) {
e.stopPropagation();
});
Then just put the data-keepOpenOnClick attribute anywhere in any of the <li> tags or its child elements, depending on your situation. E.G.:
<ul class="dropdown-menu">
<li>
<-- EG 1: Do not close when clicking on the link -->
<a href="#" data-keepOpenOnClick>
...
</a>
</li>
<li>
<-- EG 2: Do not close when clicking the checkbox -->
<input type="checkbox" data-keepOpenOnClick> Pizza
</li>
<-- EG 3: Do not close when clicking the entire LI -->
<li data-keepOpenOnClick>
...
</li>
</ul>
On bootstrap 4, when you put a form inside the dropdown menu, it won't collapse when clicking inside of it.
So this worked best for me:
<div class="dropdown">
<!-- toggle button/link -->
<div class="dropdown-menu">
<form>
<!-- content -->
</form>
</div>
</div>
In short, You can try this. It is working for me.
<span class="product-remove">
<a class="removefromcart" onclick=" event.stopPropagation();" packageid="4" href="#">x</a>
</span>
The menu opens when you give show class to the menu, so you can implement the function yourself without using data-toggle="dropdown".
<div class="dropdown">
<button class="btn btn-secondary" type="button">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div id="overlay"></div>
#overlay{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000;
display: none;
}
#overlay.show{
display: block;
}
.dropdown-menu{
z-index: 1001;
}
$('button, #overlay').on('click', function(){
$('.dropdown-menu, #overlay').toggleClass('show')
})
Try this in codepen.
I was having the same problem with an accordion/toggle sub-menu that was nested within a dropdown-menu in Bootstrap 3. Borrowed this syntax from the source code to stop all collapse toggles from closing the dropdown:
$(document).on(
'click.bs.dropdown.data-api',
'[data-toggle="collapse"]',
function (e) { e.stopPropagation() }
);
You can replace [data-toggle="collapse"] with whatever you want to stop closing the form, similar to how #DonamiteIsTnt added a property to do so.
I wrote some lines of code that make it works as perfect as we need with more of control on it:
$(".dropdown_select").on('hidden.bs.dropdown', function () {
if($(this).attr("keep-open") == "true") {
$(this).addClass("open");
$(this).removeAttr("keep-open");
}
});
$(".dropdown_select ul li").bind("click", function (e) {
// DO WHATEVER YOU WANT
$(".dropdown_select").attr("keep-open", true);
});
I have a few dropdowns in a list. Currently, when I hover over the dropdowns they open just fine. However, when tabbing through the website when I tab through each list item the dropdown opens. I would like to only open the dropdown when hitting enter then continue to tab through the menu afterwards while keeping the hover functionality the same.
<div class="container">
<ul>
<li class="dropdown tabindex="2">
<a class="menu-anchor" href="javascript:;" tabindex="-1">Program Areas</a>
<i class="dropdown-toggle" data-toggle="dropdown" style="display: none;"></i>
<div class="dropdown-menu">
</div>
</li>
<li class="dropdown tabindex="2">
<a class="menu-anchor" href="javascript:;" tabindex="-1">Program Areas</a>
<i class="dropdown-toggle" data-toggle="dropdown" style="display: none;"></i>
<div class="dropdown-menu">
</div>
</li>
<li class="dropdown tabindex="2">
<a class="menu-anchor" href="javascript:;" tabindex="-1">Program Areas</a>
<i class="dropdown-toggle" data-toggle="dropdown" style="display: none;"></i>
<div class="dropdown-menu">
</div>
</li>
</ul>
</div>
CSS
.dropdown:hover > .dropdown-menu {
display: block;
}
I am trying to provide search text box for sub menu. Even though it is working fine, I need to keep on holding the mouse to enter the searching text, the moment I leave out the mouse the submenu is closing and I am not able to enter my search text. Please find my Plunker for reference. Is there any fix for this?
The following is my sub menu code:
<li class="dropdown-submenu"><a href>Filter Sub Menu</a>
<ul class="dropdown-menu">
<li>
<input type="text" ng-model="filterSearch">
</li>
<li ng-repeat="filt in savedFilterList|filter:filterSearch "> <a href> {{filt.filter_name}}</a>
</li>
</ul>
</li>
If you must do a submenu then probably the easiest thing is to just use $event.stopPropagation() on the ng-click for the li element with your input.
Your Plunker was sort of a hot mess with multiple copies of the bootstrap.css, jQuery, bootstrap.js and some other jQuery plugin. That's bound to affect whether things work or not, so I deleted everything that was not relevant to this question.
Remember, when you're using UI Bootstrap, do not load bootstrap.js. jQuery is also unnecessary with UI Bootstrap (don't load it unless you need it for some other jQuery plugin that you're wrapping in an AngularJS wrapper -- which I recommend avoiding if at all possible).
Plunker Demo
<body ng-controller="MainCtrl">
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn dropdown-toggle" dropdown-toggle>
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a>Apply</a>
</li>
<li>
<a>Cancel</a>
</li>
<li>
<a>Save</a>
</li>
<li>
<a>Save As</a>
</li>
<li class="dropdown-submenu">
<a>Filter Sub Menu</a>
<ul class="dropdown-menu">
<!--ADD $event.stopPropagation() to the li that wraps the search input-->
<li ng-click="$event.stopPropagation()" >
<div class="input-group">
<span class="input-group-addon">
<span class="sr-only">Search</span>
<span class="glyphicon glyphicon-search"></span>
</span>
<input type="text" class="form-control" ng-model="filterSearch">
</div>
</li>
<li ng-repeat="filt in savedFilterList|filter:filterSearch ">
<a>{{filt.filter_name}}</a>
</li>
</ul>
</li>
</ul>
</div>
Stop click event on search box.
(function(){
app.directive('stopEvent', function () {
return {
restrict: 'A',
link: function (scope, element, attr) {
element.bind('click', function (e) {
e.stopPropagation();
});
}
};
});
}());
<ul class="dropdown-menu">
<li>
<input type="text" ng-model="filterSearch" stop-event>
</li>
<li ng-repeat="filt in ui3DataSet.savedFilterList | filter:filterSearch"> <a href ng-click="getDataBasedonFilter(filt)"> {{filt.filter_name}}</a>
</li>
</ul>
I'm trying to navigate through tabs in bootstrap 2.3.2 using dropdown menu links and buttons.
I'm able to navigate to different tabs using links in the dropdown menu, however when I navigate back to the tab with the dropdown menu, the links in the dropdown seem to have been disabled.
Demo
<div class="modal-body chart-edit-body">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab-settings" data-toggle="tab">
Settings
</a>
</li>
<li>
Customize
</li>
</ul>
<div class="tab-content" id="edit-chart-filter">
<div class="tab-pane active" id="tab-settings">Settings Tab</div>
<div class="tab-pane" id="tab-custom">Customize Tab
<div id="filters-list-custom" class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Go to Hidden tabs
<span class="caret"></span>
</a>
<ul class="dropdown-menu align-left-ul">
<li>
Hidden Tab 1
Hidden Tab 2
Hidden Tab 3
</li>
</ul>
</div>
</div>
<div class="tab-pane" id="tab-hidden1">
Hidden Tab 1
<a href="#tab-custom" role="button" class="btn">
Back to dropdown menu
</a>
</div>
<div class="tab-pane" id="tab-hidden2">
Hidden Tab 2
<a href="#tab-custom" role="button" class="btn">
Back to dropdown menu
</a>
</div>
<div class="tab-pane" id="tab-hidden3">
Hidden Tab 3
<a href="#tab-custom" role="button" class="btn">
Back to dropdown menu
</a>
</div>
</div>
</div>
Any ideas as to why this is happening?
You put all your links in one <li> tag. They must be seperate tags
<li> Hidden Tab 1 </li>
<li> Hidden Tab 2 </li>
<li> Hidden Tab 3 </li>
Also remove the active class once clicked. If you not remove, after returning to dropdow the link you clicked will be active.
$(function () {
$('#edit-chart-filter a').click(function (e) {
e.preventDefault();
$('a[href="' + $(this).attr('href') + '"]').tab('show');
$(this).parent().removeClass('active');
})
});
I made a dropdown list using bootstrap.Dynamically I want to disable and enable the dropdown list.
html code:
<div class="span3 offset1">
<select name="primary" class="select-block" id="select_alert" style="display: none;">
<option "selected"="">Choose Alert T</option>
<option value="T1">T1</option>
<option value="T2">T2</option>
<option value="T3">T3</option>
<option value="T4">T4</option>
</select>
<div class="btn-group select select-block">
<i class="dropdown-arrow dropdown-arrow-primary"></i>
<button class="btn dropdown-toggle clearfix btn-primary" data-toggle="dropdown" id="select_alert">
<span class="filter-option pull-left">Choose Alert T</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-primary" role="menu">
<li rel="0" class="selected">
<a tabindex="-1" href="#" class="">
<span class="pull-left">Choose Alert T</span>
</a>
</li>
<li rel="1">
<a tabindex="-1" href="#" class="">
<span class="pull-left">T1</span>
</a>
</li>
<li rel="2">
<a tabindex="-1" href="#" class="">
<span class="pull-left">T2</span></a>
</li>
<li rel="3">
<a tabindex="-1" href="#" class="">
<span class="pull-left">T3</span>
</a>
</li>
<li rel="4">
<a tabindex="-1" href="#" class="">
<span class="pull-left">T4</span>
</a>
</li>
</ul>
</div>
</div>
some times I want to disable and sometimes I want to enable.So How can I do this.
In this I have 2 more dropdown elemnts.All are placed in singlw div tag.Here I didn't mention that div tag id name.I just putted single dropdown element code.
Yes, by jquery you can get this:
Here is the example:
http://jsfiddle.net/jV7ye/
$(document).ready(function() {
$("#chkdwn2").click(function() {
if ($(this).is(":checked")) {
$("#dropdown").prop("disabled", true);
} else {
$("#dropdown").prop("disabled", false);
}
});
});
UPDATED JS CODE as per your need:
$(document).ready(function() {
if(!$("#chkdwn2").is(":checked"))
{
$("#dropdown").prop("disabled",true);
}
$("#chkdwn2").click(function() {
if ($(this).is(":checked")) {
$("#dropdown").prop("disabled", false);
} else {
$("#dropdown").prop("disabled", true);
}
});
});
Replace dropdown id with your id. Thanks
By using jquery we can do
Disable Dropdown
$('.select_alert').attr('data-toggle','');
Enable Dropdown
$('.select_alert').attr('data-toggle','dropdown');
If above solutions does not work for you, the try
$('#yourDropDownElement').prop('disabled', true).trigger('chosen:updated');
I'm using boostrap v 3.3.6
You can do this by add if block on the property and add disabled class to the drop down.
below is my div in that i have eanbled/disabled dropdown toggle button on IsNewEditDisabled
<button ng-if="!IsNewEditDisabled" class="btn dropdown-toggle" ng-class="{open: status.isopen}" dropdown-toggle>
<i class="fa fa-pencil"></i><span class="caret"></span>
</button>
<button ng-if="IsNewEditDisabled" class="btn dropdown-toggle disabled" ng-class="{open: status.isopen}" dropdown-toggle>
<i class="fa fa-pencil"></i><span class="caret"></span>
</button>