I have a Bootstrap dropdown button with the following markup:
<div class="btn-group dropup">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Test<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Link 1
Link 2
Link 3
</li>
</ul>
</div>
When you click on a.dropdown-toggle, Bootstrap's javascript toggles the ul.dropdown-menu's visibility by adding the class open to the div.btn-group. All this is well and good.
The problem I'm experiencing occurs when I add my own javascript function to the a.dropdown-toggle's click event. Something like this:
$('a.dropdown-toggle').click(function (e) {
e.preventDefault();
$('a.dropdown-toggle').html('Testing...');
});
When I do this something weird happens. When you click the button, it expands the menu as desired EXCEPT when you click directly on the .caret in the button. When you click directly on the .caret, it only executes my click event.
How can I resolve this and have clicks directly on the .caret toggle the menu like clicking anywhere else on the button does.
http://jsfiddle.net/UZkQL/
In your fiddle you have:
$('a.dropdown-toggle').html('Testing...<span class="caret"></span>');
The issue is that you recreate the span element with the carat, which seems to make it not have a click handler bound to it. A quick and dirty fix would be:
$('a.dropdown-toggle').click(function (e) {
e.preventDefault();
if ($('a.dropdown-toggle').text().indexOf('ing...') == -1) {
$('a.dropdown-toggle').find('span').before('ing...');
}
});
Related
I have a menu which has to be toggled (open and closed). Also if one dropdown is open, and the user clicks on some other dropdown then, in this case, the opened one has to close. In the code which I have written, I am able to achieve the scenario of closing the dropdown if the user clicks on the next. But the dropdown does not toggle when clicked on the link. It only opens. But it has to also close when the same link is clicked.
Js code.
$('.header-nav-menu .header-menu a.menu-item').click(function(e) {
e.preventDefault();
$('.header-nav-menu .header-menu ').removeClass('show-menu-dropdown');
if ($(this).closest('.header-menu').hasClass('show-menu-dropdown')) {
$(this).closest('.header-menu').removeClass('show-menu-dropdown');
} else {
$(this).closest('.header-menu').addClass('show-menu-dropdown');
}
});
HTML code
<div class="header-menu third-level">
Who We Are
<li class="no-submenu">
<div class="menu-item">
Our Brand
</div>
</li>
</div>
You can try a boolean variable to save whether or not the class is present before removing it from all the menus. Something like this:
$('.header-nav-menu .header-menu a.menu-item').click(function(e){
e.preventDefault();
var hasClass = $(this).closest('.header-menu').hasClass('show-menu-dropdown');
$('.header-nav-menu .header-menu ').removeClass('show-menu-dropdown');
if (hasClass){
$(this).closest('.header-menu').removeClass('show-menu-dropdown')
}else{
$(this).closest('.header-menu').addClass('show-menu-dropdown')
}
})
I would like create and display menu for my element only after click in small button.
I have a small button which run function "doAction"
<i class="fa fa-ellipsis-h" ng-click="doAction(\'OpenMenu\', $event)"></i>
In my function 'doAction' a would like fetch position X Y from event mouse click and display in this place my menu.
Almost everything work... I have problem with 'dropdown-menu'.
More precisely, i see button discribed above and button from this code (id=test):
var menu = angular.element('<div class="dropdown">' +
'<button id="test" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><span class="caret"></span></button>'+
'<ul class="dropdown-menu">'+
'<li>HTML</li>'+
'<li>CSS</li>'+
'<li>JavaScript</li>'+
'</ul>'+
'</div>');
menu.css({
position: 'absolute',
left: event.clientX,
top: event.clientY,
zIndex: '999'
});
var body = angular.element(document).find('body').eq(0);
body.append(menu);
Now, i have to click on first button 'fa-ellipsis-h' later button "test", and only then i see my menu.
I don't know how remove button 'id = test' from variable "menu" and open menu immediately after the press first button 'fa fa-ellipsis-h'.
First, are you sure that you need those single quotes escaped in your function? I copied and pasted your HTML into a jsbin, and it immediately failed because of that.
If I understand what you're asking, you want your menu to open after the first click, instead of after clicking the <i> element, and THEN clicking the test button.
It is working for me here in this bin: working example
<i class="fa fa-ellipsis-h" data-ng-click="doAction('OpenMenu', $event)">Menu</i>
Clicking the immediately opens the menu (I added in some text for those elements, because I don't have the fontawesome library included).
I'm using Bootstrap 3.0, with its excellent drop-down menu.
If I click outside of the drop-down menu the menu will disappear, and that is ok.
But when I click on a drop-down menu item, the menu disappears. I do not want this to happen, and there is no option to control the toggle behavior. I want the menu to remain open after clicking on one of the items, like the Facebook notification menu.
I think I have to modify the Bootstrap source, which I don't really want to do. So before I touch the source, I want to know is there any good workaround? If not, how should I change the source for minimum impact on Bootstrap?
Thank you for any ideas.
Here is one way to keep the dropdown open after click...
$('#myDropdown').on('hide.bs.dropdown', function () {
return false;
});
Demo: http://www.bootply.com/116350
Another option is to handle the click event like this..
$('#myDropdown .dropdown-menu').on({
"click":function(e){
e.stopPropagation();
}
});
Demo: http://www.bootply.com/116581
The accepted answer is very helpful. I want to provide another perspective - when a drop down menu should stay open when only certain items are clicked.
// A utility for keeping a Bootstrap drop down menu open after a link is
// clicked
//
// Usage:
//
// <div class="dropdown">
// <a href="" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
// Dropdown trigger <span class="caret"></span>
// </a>
//
// <ul class="dropdown-menu" aria-labelledby="dLabel">
// <li>Edit</li>
// <li>Delete</li>
// </ul>
// </div>
$(".dropdown .dropdown-menu a").on("click", function(e) {
var keepMenuOpen = $(this).data("keep-menu-open"),
$dropdown = $(this).parents(".dropdown");
$dropdown.data("keep-menu-open", keepMenuOpen);
});
$(".dropdown").on("hide.bs.dropdown", function(e) {
var keepMenuOpen = $(this).data("keep-menu-open");
$(this).removeData("keep-menu-open");
return keepMenuOpen !== true;
});
In vanilla JS
document.getElementById('myDropdown').addEventListener('click', function (event) {
event.stopPropagation();
});
I am using this code, which is taken almost out of the box from the bootstrap docs, to get a simple collapse behaviour for a button (I converted the button to a link):
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTree" aria-expanded="false" aria-controls="collapseTree">
<b>click me</b>
</button>
<div class="collapse" id="collapseTree">
<div class="well">
<h6>Example text goes here</h6>
</div>
</div>
Now, what I am trying to do is to be able to close the text when the user clicks outside the button. I know that is asked many times in stack overflow but jQuery is NOT AT ALL intuitive ! at least for a beginner like me, so I am not really able to adapt any of the solutions proposed on this SO answer to get the desired behaviour.
For example, I am using this script (concept borrowed from here to try to control the outside click behaviour of the above code :
<script>
$(document).ready(function () {
$(document).click(function (event) {
var clickover = $(event.target);
var _opened = $(".btn-link").hasClass("collapse");
if (_opened === true && !clickover.hasClass("data-toggle") && clickover.parents('.btn-link').length == 0) {
$("button.data-toggle").click();
}
});
});
</script>
but of course with no luck. Any hint would be greatly appreciated !
UPDATE
Another try with no luck here.
you could use the following:
//handling the hiding when clicking anywhere else in the document
$(document).mouseup(function(e)
{
var container = $('.btn-link');
if (container.has(e.target).length === 0) {
// the closing function
}
});
This is how I did it in Coffeescript for Bootstrap 4 with a non-standard navbar.
$(document).click (e)->
#console.log e.target
unless $('#toggle-button').has(e.target).length || $('#toggle-menu').has(e.target).length
$('#toggle-menu').collapse('hide')
So basically, unless you click the button or the menu, close the menu.
Note: Strange, on iOS clicking on text doesn't register a click event, nor a mouseup event. Clicking on an image does fire events though. Don't know how to fix this.
I've got a bootstrap popover working so:
Popover opens on click
Popover closes when you click outside the popover
Popover has default href for if JS is disabled
Code is:
<a class="badge badge-popover"
data-original-title="title here"
data-trigger="focus"
data-placement="right"
data-content="<p>Content Here</p>" data-html="true"
href="/help">?</a>
$('.badge-popover').click(function(e){
e.preventDefault();
}).popover();
It's working fine across all browsers, but not on the iPad. Any ideas why? Where am I going wrong?
Thanks :)
I am using Jquery 1.9.1, bootstrap 2.1.1
Try to use the hover event:
This should trigger the Popover on Desktop via hover and on mobile/tablet via click(touch).
<a class="badge badge-popover"
data-original-title="title here"
data-placement="right"
data-trigger="hover"
data-content="<p>Content Here</p>" data-html="true"
href="/help">?</a>
Refer following code snippet to get it works:
$('[data-toggle="popover"]').popover();
$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that triggers a popup
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
This is the easiest way of detecting clicks on the body and close all the tooltips on the page.
You can check the live example here
Thanks!
Just encountered the same problem. Changing data-trigger="focus" to data-trigger="click" works. Hover also works.
Changing data-trigger="focus" to data-trigger="click" works almost ok, but the problem is that the popover remains open even when you click outside of it and you can close it only if you click on the element, that initiated the popover...