Having different click areas on sidenav - javascript

I am using bootstrap and in that I am using side nav to serve collapsible list on the left side of the page. Below is my code.
<ul class="nav navbar-nav side-nav">
<li>
<a class="active" href="#" onclick="loadelementsonpage(); return false" data-toggle="collapse" data-target="#licomp1">
<i class="fa fa-fw fa-arrow-v"></i>Parent1
</a>
<ul id="licomp1" class="collapse">
<li>Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>
</li>
</ul>
Instead of fixed <i class="fa fa-fw fa-arrow-v"></i> I want to use toggle plus and minus. As it is shown in code, I am calling one function when parent1 is clicked. But when I try to expand the ul, the function loadelementsonpage() is called everytime. So, I want list to collapse only when that toggle image is clicked. In the same way I want to call loadelementsonpage() only when the outer area of that toggle image is clicked. I changed this data-toggle and data-target to i class, but the problem is the function is still getting called and if I move the i class out of a tag, the style is messed up.
So can someone please shed some light on how to have different click areas on the parent li? One is for collapse and another is for calling function to load right side content page.
P.S: Trying to implement this http://cssmenumaker.com/menu/modern-jquery-accordion-menu kind of side nav list where + or - should be clickable for only expanding and collapsing. Please click on build online in that link to see the side nav. Other area(apart from + and - icons) should act as link href to load the page.


Instead of giving the data-toggle attribute to the anchor, give it to the icon element so that toggle works only for the icon. You can use the classes here for plus and minus and toggle between the classes glyphicon-plus and glyphicon-minus
<a class="active" href="#">
<span data-toggle="collapse" class="glyphicon glyphicon-plus" data-target="#licomp1"></span>Parent1
</a>
$('.side-nav a span').on('click', function () {
$(this).toggleClass('glyphicon-plus glyphicon-minus');
});
Now on click of the anchor you can check if the element is A and if true then only call the custom function loadelementsonpage.
$('.side-nav a').on('click', function (e) {
console.log(e.target.tagName);
if (e.target.tagName == "A") {
loadelementsonpage();
return true;
}
})
function loadelementsonpage() {
alert('Load elements on page');
}
See fiddle


jsbin demo
Remove the inline JS you have in your HTML:
<a class="active" href="#" data-toggle="collapse" data-target="#licomp1">
<i class="fa fa-fw fa-arrow-v"></i>Parent1
</a>
And simply add this to your jQuery:
function loadelementsonpage(){
alert("LOADED ELEMENTS! YIIHA"); // Or whatever goes here
}
$(".side-nav").on("click", "a[data-target]", function(e) {
e.preventDefault(); // Prevent default Browser anchor-click behavior
if( !$(e.target).hasClass("fa") ){ // If the clicked el. target was not `.fa`
// means it was the parent `a` to get the click event. Therefore...
e.stopPropagation(); // prevent the click to propagate
// to underneath layers triggering stuff and...
return loadelementsonpage(); // execute (return) our desired function.
}
});
(Make sure you have it in document.ready function)
What the above does


Proof of concept:
function loadelementsonpage(target) {
// example stuff
$(target).toggle();
}
$(".side-nav").on("click", "a[data-toggle]", function(event) {
event.preventDefault(); // Prevent default Browser anchor-click behavior
var icon = $(event.target).find('.collapseIcon');
if (icon.text() === '+') {
icon.text('-');
} else {
icon.text('+');
}
loadelementsonpage(event.target.getAttribute('data-target'));
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav side-nav">
<li>
<a class="active" href="#" data-toggle="collapse" data-target="#licomp1">
<span class="collapseIcon">-</span> Parent1
</a>
<ul id="licomp1" class="collapse">
<li>Child1
</li>
<li>Child2
</li>
<li>Child3
</li>
</ul>
</li>
</ul>

Related

Multilevel menu on mobile with touchstart on the icon within the link

There is multilevel menu where each <li> contains <a>. On desktop the submenu is opened with :hover and all is good.
On mobile I want to replace :hover with click on the font awesome caret-down icon click to open the submenu. However in below html the <a>
captures the touchstart.
How to capture click on icon that is inside the link and have rest of the link still clickable?
$(document).ready(function () {
$('.hover').bind('touchstart', function (e) {
e.preventDefault();
$(this).parent().toggleClass('hover_effect');
});
});
This is the menu structure:
<li class="hover">WordPress Development<i class="fa fa-caret-down hover" aria-hidden="true"></i>
<ul>
<li>Themes</li>
<li>Plugins</li>
<li class="hover">Custom Post Types<i class="fa fa-caret-down hover" aria-hidden="true"></i>
<ul>
<li class="hover">Portfolios</li>
<li class="hover">Testimonials</li>
</ul>
</li>
<li>Options</li>
</ul>
</li>

So what you need is event or function which will work not on link clicked but on your fontawesome icon. And because in yur navigation you have only one tag, you don't need to provide it id or class, just replace ".hover" to ".hover i":
`
$(document).ready(function () {
$('.hover i').bind('touchstart', function (e) {
e.preventDefault();
$(this).parent().toggleClass('hover_effect');
});
});
`

jQuery checking if a link is clicked

I have created a burger menu using jQuery. And I have also created another jQuery function that automatically scrolls down the page to the anchor position when a link is clicked. Now what I need the burger menu function to do is close when one of the auto_close class links is clicked.
<nav>
<img class="logo_animated" src="images/popsies.svg">
<ul id="height">
<li class="auto_close">Welcome</li>
<li class="auto_close">Menu</li>
<li class="auto_close">Opening Times</li>
<li id="mob_icons">
<i class="fa fa-facebook-official fa-2x" aria-hidden="true"></i>
<i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
</li>
<li class="mob_contact">Tel: 0113 0000000</li>
<li class="mob_contact">Email: example#yahoo.co.uk</li>
</ul>
</nav>
my burger menu function:
$(document).ready(function(){
$(".burger-button").click(function(){
$("nav").toggleClass("show");
$("body").toggleClass("no_scroll");
});
});

Assuming that the show class reveals the burger menu, remove it if any of the a elements was clicked.
$("#height li a").click(function() {
$(".burger-button").removeClass("show");
});

since you are using toggle you can just add a reference to the .auto_close a links like so:
$(document).ready(function(){
$(".burger-button,.auto_close a").click(function(){
$("nav").toggleClass("show");
$("body").toggleClass("no_scroll");
});
});

the simplest way, if your burger is always open, when one of your links is clicked.
$('.auto_close').click(function(){
$(".burger-button").trigger('click')
})
else if it isnt sure the burger is always open, just remove the classes
$('.auto_close').click(function(){
$("nav").removeClass("show");
$("body").removeClass("no_scroll");
});

Remove class with Jquery on a different item

I have a mobile menu button that has an animation, the class changes on click of the menu and click backs to normal when clicked again. A menu also pops out on click.
I want the animation end state to also click back to normal when I click one of the pop out menu anchor links.
Here is my HTML code:
<div class="o-grid__item">
<button id="menu" class="c-hamburger c-hamburger--htx">
<span>toggle menu</span>
</button>
</div>enter code here
<nav class="main-menu">
<ul>
<li>
<a href="#welcome">
<i class="fa"></i>
<span class="nav-text">Home</span>
</a>
</li>
<li>
<a href="#portfolio">
<i class="fa"></i>
<span class="nav-text">Work</span>
</a>
</li>
<li>
<a href="#about">
<i class="fa"></i>
<span class="nav-text">About</span>
</a>
</li>
<li>
<a href="#contact">
<i class="fa"></i>
<span class="nav-text">Contact</span>
</a>
</li>
</ul>
</nav>
Here is the script I'm using to toggle the menu
$(document).ready(function(){
$(".c-hamburger").click(function(){
$(".main-menu").toggleClass("expand-menu");
});
});
Here is the code for the remove/add class for animating the button.
(function() {
"use strict";
var toggles = document.querySelectorAll(".c-hamburger");
for (var i = toggles.length - 1; i >= 0; i--) {
var toggle = toggles[i];
toggleHandler(toggle);
};
function toggleHandler(toggle) {
toggle.addEventListener( "click", function(e) {
e.preventDefault();
(this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
});
}
})();
I need to know how to add remove this class for the menu button, on click of one of my list items in my list? any help much appreciated.

to remove a class from an element instead of just toggling it, use the .removeClass extension for the JQuery element selector. Add this to the anchor links

If you are using jquery anyways, then use this for the class toggling logic
$(".main-menu ul li a").click( function(){
e.preventDefault();
$(this).closest("li").toggleClass("is-active").siblings().removeClass("is-active");
});

Toggle Bootstrap Chevron

I want to toggle a chevron in a bootstrap drop down menu, when the drop down is toggled. I can make it toggle when clicked, but I would rather it toggle on drop down that way if you click on another part of the menu the chevron changes back. It currently will stay with the minus sign unless you click the chevron to change it back.
<li class="dropdown navbar-custom first-navbar-custom">
<a href="#" data-toggle="dropdown" class="dropdown-toggle shortNav hidden-md hidden-lg pull-left cheveron-dropdown">
<span class="chevron_toggleable glyphicon glyphicon-plus glyphiconIcon hidden-md hidden-lg">
</span>
</a>
<a href="/glass-containers/c/455/"><strong>Glass Containers</strong>
</a>
<ul class="dropdown-menu">
<script>
$(document).ready(function() {
$('dropdown-toggle').dropdown('toggle', function() {
$('.chevron_toggleable').toggleClass('glyphicon-plus glyphicon-minus');
});
});
</script>
I feel like its really close, I just don't have the jquery part correct can someone please help me and tell me what I am doing wrong.
The fiddle should explain all. https://jsfiddle.net/nu8wmjq5/

SECOND EDIT BASED ON AUTHORS JSFIDDLE:
The code below will react to all events on the dropdowns specific to the class selector. It then finds the chevron that is inside the specific dropdown that has fired the event.
FIDDLE: https://jsfiddle.net/t79to9xu/
$(document).ready(function() {
$('.myDropdown').on('show.bs.dropdown', function () {
$(this).find('.chevron_toggleable')
.removeClass("glyphicon-plus")
.addClass("glyphicon-minus");
})
$('.myDropdown').on('hide.bs.dropdown', function () {
$(this).find('.chevron_toggleable')
.removeClass("glyphicon-minus")
.addClass("glyphicon-plus");
})
});
I'm sure there is a nicer way of doing this, but I'll let you do your research. .find() searches the descendents of the element.
https://api.jquery.com/find/
As such it's worth noting that if your dropdown has two elements with the .chevron-toggleable class inside of it, it'll amend both of them. You'll need to be more specific with your selector if that ever becomes the case.
EDIT:
I've attached some example code. This is a forked version of the example provided to another question by Skelly here:
http://www.bootply.com/zjWn1QPfNU
JS:
$('#myDropdown').on('show.bs.dropdown', function () {
$('#chevron').removeClass("glyphicon-plus").addClass("glyphicon-minus");
})
$('#myDropdown').on('hide.bs.dropdown', function () {
$('#chevron').removeClass("glyphicon-minus").addClass("glyphicon-plus");
})
HTML:
<div class="btn-group" id="myDropdown">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Menu
<span id="chevron" class="glyphicon glyphicon-plus"></span>
</a>
<ul class="dropdown-menu">
<li>Choice1</li>
<li>Choice2</li>
<li>Choice3</li>
<li class="divider"></li>
<li>Choice..</li>
</ul>
</div>
ORIGINAL ANSWER
Bootstrap has a bunch of different events that fire when interacting with a dropdown. They're in the official documentation here.
Specifically the ones you'll find of interest are hide.bs.dropdown (event is fired immediately when it is about to be hidden) and hidden.bs.dropdown (fired after the dropdown has been hidden).
$('#myDropdown').on('hide.bs.dropdown', function () {
// DROPDOWN IS GOING TO CLOSE, CHANGE CHEVRON HERE.
})

Does this help?
<script>
$(document).ready(function() {
$('dropdown-toggle').dropdown('toggle', function() {
if($('.chevron_toggleable').hasClass('glyphicon-plus')) {
$(this).removeClass("glyphicon-plus").addClass("glyphicon-minus");
} else {
$(this).removeClass("glyphicon-minus").addClass("glyphicon-plus");
}
});
});
</script>

For future researchers this is for navbar dropdowns and this code might help you
$(function() {
// THIS WILL FIRE WHENEVER DROPDOWN SHOW
$('.nav > li.dropdown').on('show.bs.dropdown', function () {
$(this).find('.glyphicon').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
});
// THIS WILL FIRE WHENEVER DROPDOWN HIDE
$('.nav > li.dropdown').on('hide.bs.dropdown', function () {
$(this).find('.glyphicon').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
});
});
Here is a working fiddle https://jsfiddle.net/qfe9e7tb/1/

Avoid dropdown menu close on click inside

I have a Twitter Bootstrap dropdown menu. As all Twitter Bootstrap users know, the dropdown menu closes on click (even clicking inside it).
To avoid this, I can easily attach a click event handler on the dropdown menu and simply add the famous event.stopPropagation().
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-list-alt"></i> Menu item 1
<span class="fa fa-chevron-down pull-right"></span>
</a>
<ul class="dropdown-menu mega-dropdown-menu">
<li>
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel"></li>
<li class="active" data-slide-to="1" data-target="#carousel"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img alt="" class="img-rounded" src="img1.jpg">
</div>
<div class="item active">
<img alt="" class="img-rounded" src="img2.jpg">
</div>
</div>
<a data-slide="prev" role="button" href="#carousel"
class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a data-slide="next" role="button" href="#carousel"
class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</li>
</ul>
</li>
</ul>
This looks easy and a very common behavior, however, and since carousel-controls (as well as carousel indicators) event handlers are delegated to the document object, the click event on these elements (prev/next controls, ...) will be “ignored”.
$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
// The event won't be propagated up to the document NODE and
// therefore delegated events won't be fired
event.stopPropagation();
});
Relying on Twitter Bootstrap dropdown hide/hidden events is not a solution for the following reasons:
The provided event object for both event handlers does not give reference to the clicked element
I don't have control over the dropdown menu content so adding a flag class or attribute is not possible
This fiddle is the normal behavior and this fiddle is with event.stopPropagation() added.
Update
Thanks to Roman for his answer. I also found an answer that you can find below.

This should help as well
$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {
e.stopPropagation();
});

Removing the data attribute data-toggle="dropdown" and implementing the open/close of the dropdown can be a solution.
First by handling the click on the link to open/close the dropdown like this :
$('li.dropdown.mega-dropdown a').on('click', function (event) {
$(this).parent().toggleClass('open');
});
and then listening the clicks outside of the dropdown to close it like this :
$('body').on('click', function (e) {
if (!$('li.dropdown.mega-dropdown').is(e.target)
&& $('li.dropdown.mega-dropdown').has(e.target).length === 0
&& $('.open').has(e.target).length === 0
) {
$('li.dropdown.mega-dropdown').removeClass('open');
}
});
Here is the demo :
http://jsfiddle.net/RomaLefrancois/hh81rhcm/2/

The absolute best answer is to put a form tag after the class dropdown-menu
so your code is
<ul class="dropdown-menu">
<form>
<li>
<div class="menu-item">bla bla bla</div>
</li>
</form>
</ul>

Bootstrap provides the following function:
| This event is fired immediately when the hide instance method
hide.bs.dropdown | has been called. The toggling anchor element is available as the
| relatedTarget property of the event.
Therefore, implementing this function should be able to disable the dropdown from closing.
$('#myDropdown').on('hide.bs.dropdown', function (e) {
var target = $(e.clickEvent.target);
if(target.hasClass("keepopen") || target.parents(".keepopen").length){
return false; // returning false should stop the dropdown from hiding.
}else{
return true;
}
});

This might help:
$("dropdownmenuname").click(function(e){
e.stopPropagation();
})

I just add onclick event like below to not close dropdown-menu.
<div class="dropdown-menu dropdown-menu-right" onclick="event.stopPropagation()" aria-labelledby="triggerId">

I also found a solution.
Assuming that the Twitter Bootstrap Components related events handlers are delegated to the document object, I loop the attached handlers and check if the current clicked element (or one of its parents) is concerned by a delegated event.
$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
var events = $._data(document, 'events') || {};
events = events.click || [];
for(var i = 0; i < events.length; i++) {
if(events[i].selector) {
//Check if the clicked element matches the event selector
if($(event.target).is(events[i].selector)) {
events[i].handler.call(event.target, event);
}
// Check if any of the clicked element parents matches the
// delegated event selector (Emulating propagation)
$(event.target).parents(events[i].selector).each(function(){
events[i].handler.call(this, event);
});
}
}
event.stopPropagation(); //Always stop propagation
});
Hope it helps any one looking for a similar solution.
Thank you all for your help.

In the new Bootstrap 5 the solution is trivially simple.
Quote from the documentation page:
By default, the dropdown menu is closed when
clicking inside or outside the dropdown menu. You can use the
autoClose option to change this behavior of the dropdown.
In addition to the default behavior, we have 3 options available here:
Clickable outside: data-bs-auto-close="outside"
Clickable inside: data-bs-auto-close="inside"
Manual close: data-bs-auto-close="false"
E.g.:
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" data-bs-auto-close="inside" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
More info: https://getbootstrap.com/docs/5.1/components/dropdowns/#auto-close-behavior

$('body').on("click", ".dropdown-menu", function (e) {
$(this).parent().is(".open") && e.stopPropagation();
});
This may work for any conditions.

I tried this simple thing and it worked like a charm.
I changed the dropdown-menu element from <div> to <form> and it worked well.
<div class="nav-item dropdown" >
<a href="javascript:;" class="nav-link dropdown-toggle" data-toggle="dropdown">
Click to open dropdown
</a>
<form class="dropdown-menu ">
<ul class="list-group text-black">
<li class="list-group-item" >
</li>
<li class="list-group-item" >
</li>
</ul>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="nav-item dropdown" >
<a href="javascript:;" class="nav-link dropdown-toggle" data-toggle="dropdown">
Click to open dropdown
</a>
<form class="dropdown-menu ">
<ul class="list-group text-black">
<li class="list-group-item" >
List Item 1
</li>
<li class="list-group-item" >
LI 2<input class="form-control" />
</li>
<li class="list-group-item" >
List Item 3
</li>
</ul>
</form>

jQuery:
<script>
$(document).on('click.bs.dropdown.data-api', '.dropdown.keep-inside-clicks-open', function (e) {
e.stopPropagation();
});
</script>
HTML:
<div class="dropdown keep-inside-clicks-open">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
Demo:
Generic:
https://jsfiddle.net/kerryjohnson/omefq68b/1/
Your demo with this solution: http://jsfiddle.net/kerryjohnson/80oLdtbf/101/

I modified #Vartan's answer to make it work with Bootstrap 4.3. His solution doesn't work anymore with the latest version as target property always returns dropdown's root div no matter where the click was placed.
Here is the code:
$('.dropdown-keep-open').on('hide.bs.dropdown', function (e) {
if (!e.clickEvent) {
// There is no `clickEvent` property in the `e` object when the `button` (or any other trigger) is clicked.
// What we usually want to happen in such situations is to hide the dropdown so we let it hide.
return true;
}
var target = $(e.clickEvent.target);
return !(target.hasClass('dropdown-keep-open') || target.parents('.dropdown-keep-open').length);
});
<div class="dropdown dropdown-keep-open">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>

$('body').on("click", ".dropdown-menu", function (e) {
$(this).parent().is(".show") && e.stopPropagation();
});

Like for instance Bootstrap 4 Alpha has this Menu Event. Why not use?
// PREVENT INSIDE MEGA DROPDOWN
$('.dropdown-menu').on("click.bs.dropdown", function (e) {
e.stopPropagation();
e.preventDefault();
});

You can also use form tag. Example:
<div class="dropdown-menu">
<form>
Anything inside this wont close the dropdown!
<button class="btn btn-primary" type="button" value="Click me!"/>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Clik this and the dropdown will be closed</a>
<a class="dropdown-item" href="#">This too</a>
</div>
Source: https://getbootstrap.com/docs/5.0/components/dropdowns/#forms

Bootstrap 5
If anyone comes to this via Google wanting a Bootstrap 5 version like I was, it's built in by adding data-bs-auto-close="outside". Note the option is autoClose but when passing as a data attribute the camelcasing is removed & separated by a dash.
I have a collapse widget in a dropdown & adding data-bs-auto-close="outside" to the parent data-bs-toggle="dropdown" trigger keeps the dropdown open while the collapse is toggled.
See official Bootstrap docs: https://getbootstrap.com/docs/5.1/components/dropdowns/#options
And this codepen for example code (not my pen): https://codepen.io/SitePoint/pen/BaReWGe

I've got a similar problem recently and tried different ways to solve it with removing the data attribute data-toggle="dropdown" and listening click with event.stopPropagation() calling.
The second way looks more preferable. Also Bootstrap developers use this way.
In the source file I found initialization of the dropdown elements:
// APPLY TO STANDARD DROPDOWN ELEMENTS
$(document)
.on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '.dropdown-menu', Dropdown.prototype.keydown)
}(jQuery);
So, this line:
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
suggests you can put a form element inside the container with class .dropdown to avoid closing the dropdown menu.

Bootstrap has solved this problem themselves in their support for <form> tags in dropdowns. Their solution is quite graspable and you can read it here: https://github.com/twbs/bootstrap/blob/v4-dev/js/src/dropdown.js
It boils down to preventing propagation at the document element and doing so only for events of type 'click.bs.dropdown.data-api' that match the selector '.dropdown .your-custom-class-for-keep-open-on-click-elements'.
Or in code
$(document).on('click.bs.dropdown.data-api', '.dropdown .keep-open-on-click', (event) => {
event.stopPropagation();
});

You could simply execute event.stopPropagation on click event of the links themselves.
Something like this.
$(".dropdown-menu a").click((event) => {
event.stopPropagation()
let url = event.target.href
//Do something with the url or any other logic you wish
})
Edit: If someone saw this answer and is using react, it will not work.
React handle the javascript events differently and by the time your react event handler is being called, the event has already been fired and propagated. To overcome that you should attach the event manually like that
handleMenuClick(event) {
event.stopPropagation()
let menu_item = event.target
//implement your logic here.
}
componentDidMount() {
document.getElementsByClassName("dropdown-menu")[0].addEventListener(
"click", this.handleMenuClick.bind(this), false)
}
}

You can stop click on the dropdown from propagating and then manually reimplement the carousel controls using carousel javascript methods.
$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event) {
event.stopPropagation();
});
$('a.left').click(function () {
$('#carousel').carousel('prev');
});
$('a.right').click(function () {
$('#carousel').carousel('next');
});
$('ol.carousel-indicators li').click(function (event) {
var index = $(this).data("slide-to");
$('#carousel').carousel(index);
});
Here is the jsfiddle.

demo: http://jsfiddle.net/4y8tLgcp/
$('ul.nav.navbar-nav').on('click.bs.dropdown', function(e){
var $a = $(e.target), is_a = $a.is('.is_a');
if($a.hasClass('dropdown-toggle')){
$('ul.dropdown-menu', this).toggle(!is_a);
$a.toggleClass('is_a', !is_a);
}
}).on('mouseleave', function(){
$('ul.dropdown-menu',this).hide();
$('.is_a', this).removeClass('is_a');
});
i have updated it once again to be the smartest and functional as possible. it now close when you hover outside the nav, remaining open while you are inside it. simply perfect.

I know there already is a previous answer suggesting to use a form but the markup provided is not correct/ideal. Here's the easiest solution, no javascript needed at all and it doesn't break your dropdown. Works with Bootstrap 4.
<form class="dropdown-item">
<!-- Your elements go here -->
</form>

I know this question was specifically for jQuery, but for anyone using AngularJS that has this problem you can create a directive that handles this:
angular.module('app').directive('dropdownPreventClose', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.on('click', function(e) {
e.stopPropagation(); //prevent the default behavior of closing the dropdown-menu
});
}
};
});
Then just add the attribute dropdown-prevent-close to your element that is triggering the menu to close, and it should prevent it. For me, it was a select element that automatically closed the menu:
<div class="dropdown-menu">
<select dropdown-prevent-close name="myInput" id="myInput" ng-model="myModel">
<option value="">Select Me</option>
</select>
</div>

With Angular2 Bootstrap, you can use nonInput for most scenarios:
<div dropdown autoClose="nonInput">
nonInput - (default) automatically closes the dropdown when any of its elements is clicked — as long as the clicked element is not an input or a textarea.
https://valor-software.com/ng2-bootstrap/#/dropdowns

[Bootstrap 4 Alpha 6][Rails]
For rails developer, e.stopPropagation() will lead to undesirable behavior for link_to with data-method not equal to get since it will by default return all your request as get.
To remedy this problem, I suggest this solution, which is universal
$('.dropdown .dropdown-menu').on('click.bs.dropdown', function() {
return $('.dropdown').one('hide.bs.dropdown', function() {
return false;
});
});
$('.dropdown .dropdown-menu').on('click.bs.dropdown', function() {
return $('.dropdown').one('hide.bs.dropdown', function() {
return false;
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-list-alt"></i> Menu item 1
<span class="fa fa-chevron-down pull-right"></span>
</a>
<ul class="dropdown-menu mega-dropdown-menu">
<li>
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel"></li>
<li class="active" data-slide-to="1" data-target="#carousel"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img alt="" class="img-rounded" src="img1.jpg">
</div>
<div class="item active">
<img alt="" class="img-rounded" src="img2.jpg">
</div>
</div>
<a data-slide="prev" role="button" href="#carousel" class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a data-slide="next" role="button" href="#carousel" class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</li>
</ul>
</li>
</ul>

This helped me,
$('.dropdown-menu').on('click', function (e) {
if ($(this).parent().is(".open")) {
var target = $(e.target);
if (target.hasClass("keepopen") || target.parents(".keepopen").length){
return false;
}else{
return true;
}
}
});
Your drop down menu element needs to be like this, (take a note of the classes dropdown-menu and keepopen.
<ul role="menu" class="dropdown-menu topmenu-menu eserv_top_notifications keepopen">
The above code prevents biding on the whole <body>, instead to the specfic element with the class dropdown-menu.
Hope this helps someone.
Thanks.

The simplest working solution for me is:
adding keep-open class to elements that should not cause dropdown closing
and this piece of code do the rest:
$('.dropdown').on('click', function(e) {
var target = $(e.target);
var dropdown = target.closest('.dropdown');
return !dropdown.hasClass('open') || !target.hasClass('keep-open');
});

I've found none of the solutions worked as I would like using default bootstrap nav.
Here is my solution to this problem:
$(document).on('hide.bs.dropdown', function (e) {
if ($(e.currentTarget.activeElement).hasClass('dropdown-toggle')) {
$(e.relatedTarget).parent().removeClass('open');
return true;
}
return false;
});

Instead of writing some javascript or jquery code(reinventing the wheel). The above scenario can be managed by bootstrap auto-close option.
You can provide either of the values to auto-close:
always - (Default) automatically closes the dropdown when any of its elements is clicked.
outsideClick - closes the dropdown automatically only when the user clicks any element outside the dropdown.
disabled - disables the auto close
Take a look at the following plunkr :
http://plnkr.co/edit/gnU8M2fqlE0GscUQtCWa?p=preview
Set
uib-dropdown auto-close="disabled"
Hope this helps :)

In .dropdown content put the .keep-open class on any label like so:
$('.dropdown').on('click', function (e) {
var target = $(e.target);
var dropdown = target.closest('.dropdown');
if (target.hasClass('keep-open')) {
$(dropdown).addClass('keep-open');
} else {
$(dropdown).removeClass('keep-open');
}
});
$(document).on('hide.bs.dropdown', function (e) {
var target = $(e.target);
if ($(target).is('.keep-open')) {
return false
}
});
The previous cases avoided the events related to the container objects, now the container inherits the class keep-open and check before being closed.

Categories