Develop Reference

Javascript closing a dropdown with document.onclick

I have a dropdown dropdown using ul and li:
<img class="options_toggle" src="assets/down_arrow.png"onclick="toggle_display('options');"/>
<ul id="options" class="options_content hide">
<li>
option one
</li>
</ul>
the options_toggle function swaps back and forth between the "hide" and "show" class in the options ul. Now I want to only hide it when the user clicks anywhere except the options toggle:
$(document).ready(function () {
document.onclick = function(e) {
// prevent the dropdown from closing instantly when you click the toggle to open it
$(".options_toggle").click(function (e) {
e.stopPropagation();
});
// hide the dropdown
$(".options_content").removeClass("show");
$(".options_content").addClass("hide");
};
});
But the problem is that the first time they load the page they have to click somewhere once before clicking the toggle. After the first click it works fine, they just have to click twice at first which can be annoying.
Any ideas what it's doing and why it cancels or ignores the first toggle? Thanks.

It's usually wrong to add an event handler inside another event handler. Just bind your $(".options_toggle").click() handler at top-level.
$(document).ready(function() {
$(".options_toggle").click(function(e) {
// prevent the dropdown from closing instantly when you click the toggle to open it
e.stopPropagation();
});
$(document).click(function(e) {
// hide the dropdown
$(".options_content").removeClass("show");
$(".options_content").addClass("hide");
});
});

Bootstrap dropdown list-group/collapsable menu remain open when user click on link [duplicate]

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();
});

Change the active bootstrap tab on button click

I want to change the active bootstrap tab on the click of another button.
I have tried add id's to the tabs li and write custom jquery code.
$('#emailNotify').click(function () {
$('#notify').addClass('active').attr('aria-expanded','true');
$('#myacc').removeClass('active').attr('aria-expanded','false');
});
This code works fine on first click but it doesn't change back when I tried to click My Account tab again.
Markup:
<ul class="content-list museo_sans500">
<li>Change Password</li>
<li><a id="emailNotify" data-toggle="tab">Change Email Notifications</a></li>
<li>Change Profile Picture</li>
</ul>

You can change the active tab on the click event button with that:
$('#changetabbutton').click(function(e){
e.preventDefault();
$('#mytabs a[href="#second"]').tab('show');
})
Here's a JSFiddle with an example:
http://jsfiddle.net/4ns0mdcf/

You should use twitter-boostrap way to change between tabs:
$('#myTab a:first').tab('show'); // Select first tab
$('#myTab a:last').tab('show'); // Select last tab
or
$('#notify').tab('show'); // show notification tab

hide dropdown menu on click the item in the menu

I have five buttons, for each button, if you mouseover it, it will popup the dropdown menu (The default setting in bootstrap for dropdown is to click, but I need the button to achieve some other purposes when click the button, so I use a e.stopPropagation() to prevent the click popup action). In the css file, I set
.dropup:hover .dropdown-menu {
display: block;
}
My question is that, when I click the item in the dropdown menu, it will not hide anymore. Is there anyway to solve this issue?

Could you do something like this in place of your css so you don't have to rewrite functionality?
$(function() {
$(".dropdown").hover(
function(){ $(this).addClass('open') },
function(){ $(this).removeClass('open') }
);
});
Reference: https://stackoverflow.com/a/21486327/1585362

Javascript and a href

Let's suppose that I have the following dropdown after the last div, a dropdown menu appears once he clicks.
<div id="test"> Arrow </div>
I want the user to be able to click on this element and the dropdown appear but also if he mid clicks to be able to open this link directly in a new tab. In other words I want to prevent the default action onclick but still show the link of the element on hover or whatever.
Thank you

you can do
<div id="test"> Arrow </div>

with jquery 1.7+
$('#test a').on('click', function (e) {
if (e.which < 2) { // left mouse button
e.preventDefault();
// and code to show dropdown
}
});