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

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>

How to keep parent li opened when i clicked the child li element

<li>
<a href="#">
<i class="entypo-tools"></i>
<span class="title">PHP-SDK</span>
<span class="badge badge-secondary">3</span>
</a>
<ul>
<li class="dropdown-submenu">
<a href="/mypage_v2/sdk/installation">
<i class="entypo-inbox"></i>
<span class="title">Installation</span>
</a>
</li>
<li class="dropdown-submenu">
<a href="/mypage_v2/sdk/getStarted">
<i class="entypo-docs"></i>
<span class="title">Getting Started</span>
</a>
</li>
<li>
<a href="#">
<i class="entypo-flash"></i>
<span class="title">API-Endpoints</span>
<span class="badge badge-info">3</span>
</a>
<ul>
<li>
<a href="#">
<i class="entypo-newspaper"></i>
<span class="title">sample1</span>
<span class="badge badge-success">4</span>
</a>
<ul>
<li>
<a href="/mypage_v2/sdk/newsletter">
<i class="entypo-newspaper"></i>
<span class="title">sample1</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/newsletterEmail">
<i class="entypo-newspaper"></i>
<span class="title">sample2</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/newsletteranalytics">
<i class="entypo-newspaper"></i>
<span class="title">sample2</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/sample2">
<i class="entypo-newspaper"></i>
<span class="title">NewslettersProcess</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>

If you use php rendering and on menu item click page refreshes, you can add class for example "active" to parent li(s), and in styles add li.active {display:block} or something like that style to show hidden elements

Finally i am ok with the condition of laravel routes
<li #if(Request::path() == "mypage_v2/applications/lists" || Request::path() == "mypage_v2/applications/register") class="active opened")#endif>

Search in menu & submenu with JQuery Searchable plugin - multilevel

I want to search in menu title and submenu, but in JQuery Searchable Plugin can't find this option. When I type characters, I can find menu but can't find submenu. Searchable plugin has childSelector option but this option is searching just the first level.
$('#menu-list').searchable({
searchField: '#menu-list-search',
selector: 'li',
childSelector: '.menu-text',
show: function( elem ) {
elem.slideDown(100);
},
hide: function( elem ) {
elem.slideUp( 100 );
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/stidges/jquery-searchable/master/dist/jquery.searchable-1.0.0.min.js"></script>
<input id="menu-list-search" placeholder="Search Menu...">
<ul id="menu-list" class="nav nav-list">
<li class="">
<a href="index.html">
<i class="menu-icon fa fa-tachometer"></i>
<span class="menu-text"> menu1 </span>
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-list"></i>
<span class="menu-text"> menu2 </span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="tables.html">
<i class="menu-icon fa fa-caret-right"></i>
submenu1
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="jqgrid.html">
<i class="menu-icon fa fa-caret-right"></i>
submenu2
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
</ul>

Changes In HTML
Wrap all text (including submenu items) with
<span>text_here</span>
Changes in JS
and simply change the value of childSelector to 'span'
...
...
childSelector: 'span',
...
...

My problem solved with wrap all text in <span class="menu-text"> menu1 </span>

jquery - Remove class from parent in list

I need a Javascript IF statement that detects if:
$('.ms-quickLaunch .menu ul.static li a .menu-item-text') == "Manage"
And if it does equal "Manage" then set the list to .show().
<ul class="root static">
<li class="static linksBelow">
<a href="#" class="static menu-item">
<span class="additional-background">
<span class="menu-item-text">Manage</span>
</span>
</a>
<ul class="static" style="display: none;">
<li>
<a href="javascript:open();" class="static menu-item">
<span class="additional-background">
<span class="menu-item-text">Manage List</span>
</span>
</a>
<a href="#" class="static menu-item">
<span class="additional-background">
<span class="menu-item-text">Manage Documents</span>
</span>
</a>
</li>
</ul>
</li>
</ul>
*

if ($('.ms-quickLaunch .menu ul.static .menu-item-text').html() == "Manage") {
$('.ms-quickLaunch .menu ul.static').show();
}
(I have removed a couple of unnecessary elements from your selector to make it more efficient)

ok maybe you can try this.
but if it's possible, it's better to add id to all those lines to avoid possible clash.
<ul class="root static">
<li class="static linksBelow">
<a href="#" class="static menu-item">
<span class="additional-background">
<span class="menu-item-text">Manage</span>
</span>
</a>
<ul class="static" style="display: none;">
<li>
<a href="javascript:open();" class="static menu-item">
<span class="additional-background">
<span class="menu-item-text">Manage List</span>
</span>
</a>
<a href="#" class="static menu-item">
<span class="additional-background">
<span class="menu-item-text">Manage Documents</span>
</span>
</a>
</li>
</ul>
</li>
</ul>
if($("li.linksBelow span.menu-item-text").html().toLowerCase()=="manage"){
$("ul.static ul.static").show();
}

var anchor = $('.ms-quickLaunch .menu ul.static li a');
if ($('.menu-item-text', anchor).html() === "Manage")
{
anchor.next("ul").show();
}
jsFiddle Demo