We Keep Coding

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/

Having different click areas on sidenav

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>

jQuery Click Not Being Called in bootstrap navbar

I am having a huge issue with an item in the navbar not being able to use the click()
this is my html code:
<li class="dropdown"> <a class="dropdown-toggle" id="n-btn" href="#" data-toggle="dropdown"> <i class="icon-bullhorn"></i> <span class="badge badge-inverse" id="n-count" style="position: relative; bottom: 2px;">1</span> </a>
<div class="dropdown-menu alert-dropdown">
<ul>
<li class="text-center"><span class="pulser"></span></li>
</ul>
</div>
</li>
and my javascript:
$(window).load(function(){
$("#n-btn").click(function(e) {
e.preventDefault();
alert("test");
});
});
I tried using $(".dropdown").on("click", "#n-btn",function() { instead but it still doesn't work. If this changes anything I'm using jquery 2.0.0 and Bootstrap 2.3.2

Looking at the Bootstrap source for 2.3.2 it looks like it triggers the click.dropdown.data-api event, so instead of:
$("#n-btn").click(function(e) {
use (for Bootstrap 2.x):
$("#n-btn").on('click.dropdown.data-api', function(e) { ...
For Bootstrap 3.x (looking at its version of dropdown.js), try:
$("#n-btn").on('click.bs.dropdown', function(e) { ...

Bootstrap Dropdown with Hover

OK, so what I need is fairly straightforward.
I have set up a navbar with some dropdown menus in it (using class="dropdown-toggle" data-toggle="dropdown"), and it works fine.
The thing is it works "onClick", while I would prefer if it worked "onHover".
Is there any built-in way to do this?

The easiest solution would be in CSS. Add something like...
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0; /* remove the gap so it doesn't close */
}
Working Fiddle

The best way of doing it is to just trigger bootstraps click event with a hover. This way, it should still remain touch device friendly
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click');
});

You can use jQuery's hover function.
You just need to add the class open when the mouse enters and remove the class when the mouse leaves the dropdown.
Here's my code:
$(function(){
$('.dropdown').hover(function() {
$(this).addClass('open');
},
function() {
$(this).removeClass('open');
});
});

An easy way, using jQuery, is this:
$(document).ready(function(){
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
});
});

For CSS it goes crazy when you also click on it. This is the code that I'm using, it also don't change anything for mobile view.
$('.dropdown').mouseenter(function(){
if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
if(!$(this).hasClass('open')) { // Keeps it open when hover it again
$('.dropdown-toggle', this).trigger('click');
}
}
});

In Twitter Bootstrap is not implemented but you can use the this plugin
Update 1:
Sames question here

Hover over the nav items to see that they activate on hover.
http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#

So you have this code:
<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>
<ul class="dropdown-menu" role="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
Normally it works on click event, and you want it work on hover event. This is very simple, just use this javascript/jquery code:
$(document).ready(function () {
$('.dropdown-toggle').mouseover(function() {
$('.dropdown-menu').show();
})
$('.dropdown-toggle').mouseout(function() {
t = setTimeout(function() {
$('.dropdown-menu').hide();
}, 100);
$('.dropdown-menu').on('mouseenter', function() {
$('.dropdown-menu').show();
clearTimeout(t);
}).on('mouseleave', function() {
$('.dropdown-menu').hide();
})
})
})
This works very well and here is the explanation: we have a button, and a menu. When we hover the button we display the menu, and when we mouseout of the button we hide the menu after 100ms. If you wonder why i use that, is because you need time to drag the cursor from the button over the menu. When you are on the menu, the time is reset and you can stay there as many time as you want. When you exit the menu, we will hide the menu instantly without any timeout.
I've used this code in many projects, if you encounter any problem using it, feel free to ask me questions.

This will help you make your own hover class for bootstrap:
CSS:
/* Hover dropdown */
.hover_drop_down.input-group-btn ul.dropdown-menu{margin-top: 0px;}/*To avoid unwanted close*/
.hover_drop_down.btn-group ul.dropdown-menu{margin-top:2px;}/*To avoid unwanted close*/
.hover_drop_down:hover ul.dropdown-menu{
display: block;
}
Margins are set to avoid unwanted close and they are optional.
HTML:
<div class="btn-group hover_drop_down">
<button type="button" class="btn btn-default" data-toggle="dropdown"></button>
<ul class="dropdown-menu" role="menu">
...
</ul>
</div>
Don't forget to remove the button attribute data-toggle="dropdown" if you want to remove onclick open, and this also will work when input is append with dropdown.

This is what I use to make it dropdown on hover with some jQuery
$(document).ready(function () {
$('.navbar-default .navbar-nav > li.dropdown').hover(function () {
$('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
$(this).addClass('open');
}, function () {
$('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
$(this).removeClass('open');
});
});

Updated with a proper plugin
I have published a proper plugin for the dropdown hover functionality, in which you can even define what happens when clicking on the dropdown-toggle element:
https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
Why I made it, when there are many solutions already?
I had issues with all the previously existing solutions. The simple CSS ones are not using the .open class on the .dropdown, so there will be no feedback on the dropdown toggle element when the dropdown is visible.
The js ones are interfering with clicking on .dropdown-toggle, so the dropdown shows up on hover, then hides it when clicking on an opened dropdown, and moving out the mouse will trigger the dropdown to show up again. Some of the js solutions are braking iOS compatibility, some plugins are not working on modern desktop browsers which are supporting the touch events.
That's why I made the Bootstrap Dropdown Hover plugin which prevents all these issues by using only the standard Bootstrap javascript API, without any hack.

Try this using hover function with fadein fadeout animations
$('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);
});

This only hovers the navbar when you are not on a mobile device, because I find that hovering the navigation does not work well on mobile divices:
$( document ).ready(function() {
$( 'ul.nav li.dropdown' ).hover(function() {
// you could also use this condition: $( window ).width() >= 768
if ($('.navbar-toggle').css('display') === 'none'
&& false === ('ontouchstart' in document)) {
$( '.dropdown-toggle', this ).trigger( 'click' );
}
}, function() {
if ($('.navbar-toggle').css('display') === 'none'
&& false === ('ontouchstart' in document)) {
$( '.dropdown-toggle', this ).trigger( 'click' );
}
});
});

I try other solutions, i'm using bootstrap 3, but dropdown menu closes too quickly to move over it
supposed that you add class="dropdown" to li, i added a timeout
var hoverTimeout;
$('.dropdown').hover(function() {
clearTimeout(hoverTimeout);
$(this).addClass('open');
}, function() {
var $self = $(this);
hoverTimeout = setTimeout(function() {
$self.removeClass('open');
}, 150);
});

Triggering a click event with a hover has a small error. If mouse-in and then a click creates vice-versa effect. It opens when mouse-out and close when mouse-in. A better solution:
$('.dropdown').hover(function() {
if (!($(this).hasClass('open'))) {
$('.dropdown-toggle', this).trigger('click');
}
}, function() {
if ($(this).hasClass('open')) {
$('.dropdown-toggle', this).trigger('click');
}
});

Bootstrap drop-down Work on hover, and remain close on click by adding property display:block; in css and removing these attributes data-toggle="dropdown" role="button" from button tag
.dropdown:hover .dropdown-menu {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/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.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle">Dropdown Example</button>
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
</body>
</html>

$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(150);
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(105)
});

html
<div class="dropdown">
<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>
jquery
$(document).ready( function() {
/* $(selector).hover( inFunction, outFunction ) */
$('.dropdown').hover(
function() {
$(this).find('ul').css({
"display": "block",
"margin-top": 0
});
},
function() {
$(this).find('ul').css({
"display": "none",
"margin-top": 0
});
}
);
});
codepen

Use the mouseover() function to trigger the click. In this way the previous click event will not harm. User can use both hover and click/touch. It will be mobile friendly.
$(".dropdown-toggle").mouseover(function(){
$(this).trigger('click');
})

In Bootstrap 5.x you can add a custom class like dropdown-hover to the main dropdown element. then manage hover events by JQuery.
$( document ).ready(function() {
// Add hover action for dropdowns
let dropdown_hover = $(".dropdown-hover");
dropdown_hover.on('mouseover', function(){
let menu = $(this).find('.dropdown-menu'), toggle = $(this).find('.dropdown-toggle');
menu.addClass('show');
toggle.addClass('show').attr('aria-expanded', true);
});
dropdown_hover.on('mouseout', function(){
let menu = $(this).find('.dropdown-menu'), toggle = $(this).find('.dropdown-toggle');
menu.removeClass('show');
toggle.removeClass('show').attr('aria-expanded', false);
});
});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container p-5">
<div class="dropdown dropdown-hover">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</div>
</div>
</body>
</html>

The solution I am proposing detects if its not touch device and that the navbar-toggle (hamburger menu) is not visible and makes the parent menu item revealing submenu on hover and and follow its link on click.
Also makes tne margin-top 0 because the gap between the navbar and the menu in some browser will not let you hover to the subitems
$(function(){
function is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| navigator.maxTouchPoints; // works on IE10/11 and Surface
};
if(!is_touch_device() && $('.navbar-toggle:hidden')){
$('.dropdown-menu', this).css('margin-top',0);
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click').toggleClass("disabled");
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
<li>menuA</li>
<li>menuB</li>
<li class="dropdown">menuC
<ul id="products-menu" class="dropdown-menu clearfix" role="menu">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</li>
<li>menuD</li>
<li>menuE</li>
</ul>
$(function(){
$("#nav .dropdown").hover(
function() {
$('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");
$(this).toggleClass('open');
},
function() {
$('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");
$(this).toggleClass('open');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
<li>menuA</li>
<li>menuB</li>
<li class="dropdown">menuC
<ul id="products-menu" class="dropdown-menu clearfix" role="menu">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</li>
<li>menuD</li>
<li>menuE</li>
</ul>

You implement this functionality by using Jquery:
$('.dropdown').on('mouseover', function(){
$(this).addClass('show');
$('.dropdown-menu').addClass('show');
$('.dropdown-toggle').attr('aria-expanded', 'true');
});
$('.dropdown').on('mouseout', function(){
$(this).removeClass('show');
$('.dropdown-menu').removeClass('show');
$('.dropdown-toggle').attr('aria-expanded', 'false');
});

Tested and Working Fine
<nav class="dnt_show_mbl navbar navbar-default navbar-fixed-top" >
<div class="container" style="width:100%;">
<div class="navbar-header" style="height:90px;">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand dnt_show_mbl" href="index.html" style="margin-left:100%;margin-top:2%;">
<img src="material/logo.png" width="160px;" alt="visoka">
</a>
<a class="navbar-brand dontdisplaylg" href="index.html" style="" alt="visoka">
<img src="material/logo.png" width="200px;">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar" style="background-color: #fff;border-color:#fff;">
<ul class="nav navbar-nav navbar-right" style="margin-top: 4px;margin-right: 180px;padding:15px;letter-spacing:1px;color:#000;">
<li>HOME</li>
<li>ABOUT US</li>
<li class="dropdown-header" style="margin-top:-3px;margin-left:-3%;" onmouseout="out_menu();" onmouseover="on_menu();">
<a style="font-family: Inter !important;" class="dropdown-toggle" href="Projects.html">PROJECTS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Ongoing Projects</li><br>
<li>Completed Projects</li><br>
<li>Upcoming Projects</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<script>
function on_menu(){
$(".dropdown-header:first").addClass("open");
}
function out_menu(){
$(".dropdown-header:first").removeClass("open");
}
</script>

Bootstrap 5 with jquery version
Just add hoverable class to dropdown and add below code to main javascript file
// Hoverable dropdown
$('.dropdown.hoverable').on({
mouseenter: function(){
var dropdown = $(this).children('.dropdown-menu');
if(!dropdown.hasClass('show') && dropdown.css('position') !== 'static'){ // Ignore collapsed navbar
bootstrap.Dropdown.getOrCreateInstance(this).toggle();
}
},
mouseleave: function(){
var dropdown = $(this).children('.dropdown-menu');
if(dropdown.hasClass('show') && dropdown.css('position') !== 'static'){ // Ignore collapsed navbar
bootstrap.Dropdown.getOrCreateInstance(this).toggle();
}
}
});

Prevent the disappear of Dropdown menu using bootstrapDropdown when clicking on the list

I am using using bootstrap-dropdown to generate a Dropdown menu. I would like to prevent the disappearing of the menu when click on it.
I have implemented the following code, but it does not work. Any idea how to fix it?
HTML
<li class="dropdown notification">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="notification-label label label-info">
<i class="icon-inbox icon-white"></i>
<span class="notification-number">{{ unread_notifications }}</span>
</span>
</a>
<ul class="dropdown-menu notification-list"></ul>
</li>
JS
events: {
'click ul.notification-list': 'onClickNotification'
},
onClickNotification: function (e) {
e.preventDefault();
console.log(e);
},

Did you try with event.stopPropagation?
onClickNotification: function (e) {
e.stopPropagation();
console.log(e)
},

If you want to disable all auto closing of the dropdown you can just disable the listener
$('html').off('click.dropdown')
JSFiddle