Develop Reference

Keeping the dropdown open after selecting dropdown element bootstrap [duplicate]

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

Hide/show div with link

I'm trying to use jQuery to hide and show a div when the link in inside the a li tag is clicked, however I can't get the DOM element.
Ousite the ul >li the script it working fine
<a class="showSingle " >All Test </a> //Work Fine
$(function() {
// $('.showSingle ul.list-inline li a').click(function () {
$('.showSingle ').click(function() {
$(this).siblings('.targetDiv ').slideToggle('fast');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a><i class="fas fa-arrow-circle-down"></i>
</li>
i have add jsfiddler to explain the hole issue https://jsfiddle.net/mpef13qu/4/

I don't think there is anything wrong, you were just missing the target :/
UPDATE: I've changed the code snippet
$(function () {
$('.showSingle').click(function(e) {
e.preventDefault();
$(this).parents("ul")
.siblings('.targetDiv')
.slideToggle('fast');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a>
<i class="fas fa-arrow-circle-down"></i>
</li>
</ul>
<div class="targetDiv" style="display: none">Some text</div>
</div>
<div>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a>
<i class="fas fa-arrow-circle-down"></i>
</li>
</ul>
<div class="targetDiv" style="display: none">Some text</div>
</div>
<div>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a>
<i class="fas fa-arrow-circle-down"></i>
</li>
</ul>
<div class="targetDiv" style="display: none">Some text</div>
</div>
<div>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a>
<i class="fas fa-arrow-circle-down"></i>
</li>
</ul>
<div class="targetDiv" style="display: none">Some text</div>
</div>
<div>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a>
<i class="fas fa-arrow-circle-down"></i>
</li>
</ul>
<div class="targetDiv" style="display: none">Some text</div>
</div>
here is the link

If the target is outside the ul it's not a sibling it's more like an uncle or something ;) so $(this).siblings wont work
Try this:
$('.showSingle').click(function(e){
e.preventDefault();
$('.targetDiv').slideToggle('fast')
})
Updated answer based on your markup
Since you have multiple toggle triggers and you only want to toggle the target directly after a certain trigger you can make use of $(this)
But you need to chain a few other jQuery functions to get up to the level where you can target the next target.
$('this').parent().parent().next('.targetDiv')
.next() is better than .siblings() in this situation since it returns the next sibling matching the .targetDiv selector
Here's the complete code:
$(document).ready(function () {
$('.showSingle').click(function(e) {
e.preventDefault();
$('this').parent().parent().next('.targetDiv').slideToggle('fast');
});
});
Updated fiddle https://jsfiddle.net/ywsmgd5c/

For not reloading page <a href="#"> must be written.
I've made demo for you, see it, #Ploni Almoni

When clicked on li items from list how to append clicked item in separate div and remaining list item in different div tag using jquery

I have li list items. When I click on any one li item it should get appended or displayed to one div tag and the remaining list items at the sam time should get appended in other div tag using jQuery.
$(document).on('click', '.main-menu li', function() {
$('.sidenav').append($('.topnav')[0].innerHTML);
$('.topnav').empty();
$(this).remove()
});
<div class="topnav"></div>
<nav class="main-menu">
<ul>
<li class="acc">
<a href="#">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
List One
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">
List Two
</span>
</a>
</li>
<li class="has-list">
<a href="#">
<i class="fa fa-list fa-2x"></i>
<span class="nav-text">
List Three
</span>
</a>
</li>
</ul>
</nav>
<div class="sidenav"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

Hope I understood correctly what you expected. As mentionned before, if you want to append li to your div, you need a parent ul on top.
As suggested, here is a snippet :
$('.main-menu li').on('click', function(_click) {
var $selectedLi = $(_click.currentTarget);
$('.topnav ul').append($selectedLi.clone());
$selectedLi.remove();
$('.sidenav ul').append($('.main-menu ul').clone());
$('.main-menu ul').remove()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topnav">
<ul></ul>
</div>
<nav class="main-menu">
<ul>
<li class="acc">
<a href="#">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
List One
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">
List Two
</span>
</a>
</li>
<li class="has-list">
<a href="#">
<i class="fa fa-list fa-2x"></i>
<span class="nav-text">
List Three
</span>
</a>
</li>
</ul>
</nav>
<div class="sidenav">
<ul></ul>
</div>

Actually you can't append li elements to div, they can just be appended to a list element.
What you need to do is to get the text of the li elements and append it to the divs, and use $('.main-menu li').not($(this)) to get other li elements, where $(this) is the clicked li element.
This is how should be your code:
$(document).on('click', '.main-menu li', function() {
$('.sidenav').text($(this).text());
$('.topnav').empty();
$('.main-menu li').not($(this)).each(function(i) {
$('.topnav').append($('.main-menu li').not($(this))[i].textContent);
});
});
Demo:
$(document).on('click', '.main-menu li', function() {
$('.sidenav').text($(this).text());
$('.topnav').empty();
$('.main-menu li').not($(this)).each(function(i) {
$('.topnav').append($('.main-menu li').not($(this))[i].textContent);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topnav"></div>
<nav class="main-menu">
<ul>
<li class="acc">
<a href="#">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
List One
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">
List Two
</span>
</a>
</li>
<li class="has-list">
<a href="#">
<i class="fa fa-list fa-2x"></i>
<span class="nav-text">
List Three
</span>
</a>
</li>
</ul>
</nav>
<div class="sidenav"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

jQuery Menu > Collapse All Not WIthin Current Tree

Menu - Snippet
<ul class="Menu Open">
<li>
<a href="javascript:;" data-title="Account">
<span class="Title">Account</span>
</a>
<ul class="sub-menu First TeStInG">
<li>
<a href="javascript:;" data-title="Account/Dashboard">
<span class="Title">Dashboard</span>
</a>
</li>
<li>
<a href="javascript:;" data-title="Account/Messages">
<span class="Title">Messages</span>
</a>
<ul>
<li>
<a href="javascript:;" data-title="Account/Messages/Compose">
<span class="Title">Compose</span>
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;" data-title="Account/Profile">
<span class="Title">Profile</span>
</a>
<ul>
<li>
<a href="javascript:;" data-title="Account/Profile/View">
<span class="Title">View</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
JQuery - Snippet
$(document).ready(function() {
"use strict";
$(document).on('click', function(e) {
if ($(e.target).closest($('.Menu')).length) {
if ($(e.target).closest("a").siblings("ul").length === 0) {
console.log('Doesn\'t have Children');
} else {
$(e.target).closest("a").siblings("ul").show();
}
}
});
});
What I'm Trying To Achieve
Without using jQuery UI, I would like to make it so that only one menu item is visible at a time on each level.
If the user has expanded a level multiple times then clicks on a different higher level, all within should be hidden.
If the user clicks on a same level item which expands, all other same level should be hidden.
I've tried several ways to do this, however I keep getting tied up whereas I either make things hide which shouldn't or make it so that I cannot expand anything. I've done this previously and cannot understand why I cannot do this now.

You can use find() but when you click on parent you will have to check if it is parent, so when you want to open you just want to open direct children but when you want to close you want to close all chidren.
$("ul li ul").hide()
$('li').click(function(e) {
e.stopPropagation()
var parent = $(this)
$(this).find('ul').each(function() {
if ($(this).is(':visible')) {
$(this).hide()
} else {
if ($(this).parent().is(parent)) {
$(this).show()
}
}
})
$(this).siblings().children('ul').hide()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="Menu Open">
<li>
<a href="javascript:;" data-title="Account">
<span class="Title">Account</span>
</a>
<ul class="sub-menu First TeStInG">
<li>
<a href="javascript:;" data-title="Account/Dashboard">
<span class="Title">Dashboard</span>
</a>
</li>
<li>
<a href="javascript:;" data-title="Account/Messages">
<span class="Title">Messages</span>
</a>
<ul>
<li>
<a href="javascript:;" data-title="Account/Messages/Compose">
<span class="Title">Compose</span>
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;" data-title="Account/Profile">
<span class="Title">Profile</span>
</a>
<ul>
<li>
<a href="javascript:;" data-title="Account/Profile/View">
<span class="Title">View</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>

Removing attribute with jQuery

I'm facing a little problem with jQuery. My navbar have links that became blue when they are selected ('active' attribute), I can add attributes until now, but when I click on another link I can't remove the last one correctly. I wrote some code, I'll be thankful if anyone could help me.
//jQuery
jQuery('.navbar-nav').on('click', ' li > a.ajaxify', function (e) {
e.preventDefault();
App.scrollTop();
var url = $(this).attr("href");
var menuContainer = jQuery('.navbar-nav');
var pageContent = $('.page-content');
var pageContentBody = $('.page-content .page-content-body');
menuContainer.children('li.active').removeClass('active');
menuContainer.children('arrow.open').removeClass('open');
menuContainer.children('arrow.open').removeClass('open');
$(this).parents('li').each(function () {
$(this).addClass('active');
$(this).children('a > span.arrow').addClass('open');
});
$(this).parents('li').addClass('active');
App.blockUI(pageContent, false);
...
});
//HTML
<li class="active">
<a href="" class="ajaxify" id="startLoadTag">
<i class="fa fa-home"></i> Link
</a>
</li>
<li class="">
<a href="" class="ajaxify">
<i class="fa fa-puzzle-piece"></i> Link
</a>
</li>
<li class="">
<a data-toggle="dropdown" data-hover="dropdown" data-close-others="true" class="dropdown-toggle" href="">
<i class="fa fa-quote-right"></i>
Evento
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<i class="fa fa-building"></i> Link
</li>
<li>
<i class="fa fa-lightbulb-o"></i> Link
</li>
<li>
<i class="fa fa-suitcase"></i> Link
</li>
<li>
<i class="fa fa-group"></i> Link
</li>
<li>
<i class="fa fa-comments"></i> Link
</li>
</ul>
</li>

Before this line
$(this).parents('li').addClass('active');
you need to run an .each function for every 'active' class and remove the class.
Maybe something like this
$('li').each(function() {
if($(this).hasClass('active') {
$(this).removeClass('active');
});
}

Problem solved, just did it and everything worked just fine. Thanks all.
menuContainer.children('li.active').removeClass('active');
menuContainer.children('arrow.open').removeClass('open');
$('ul').each(function() {
$(this).children('li').each(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
}
});
});
$(this).parents('li').addClass('active');