I have a multilevel dropdown made with bootstrap, now when I navigate few levels deep and accidentally pointer comes out of current dropdown list, all lists are closed until 1st level. How can I keep all opened dropdowns open and close only when it is clicked outside dropdown? i.e. do the same when mouse is clicked on outer space, not when just moved there.
Here is my demo: http://jsfiddle.net/n8XJb/
<ul class="nav nav-pills">
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu" id="menu1">
<li class="dropdown-submenu">
Level 1
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Level 2
<ul class="dropdown-menu">
<li>Level 3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
When you navigate to Level 3, and then mouse pointer comes out of current list, it goes back to Level 1 instantly.
I have solved it by some custom event handling (http://jsfiddle.net/n8XJb/2/):
jQuery('.dropdown-menu li a').mouseover(function(e) {
e.stopPropagation();
jQuery(this).parent().parent().find('li').each(function() {
jQuery(this).removeClass('open');
});
jQuery(this).parent().addClass('open');
});
jQuery('.dropdown-toggle').click(function(e) {
jQuery(this).parent().find('li').each(function() {
jQuery(this).removeClass('open');
});
});
Bootstrap uses class open for open dropdowns, so we can set/unset it manually whenever needed.
Related
Is there a way to incorporate navigate the moment you click on a dropdown? Id like the page to navigate to section 4 upon clicking section for on the navigation bar and then if the user decides to navigate further from the list, they can by clicking on an item from the list. Thanks!
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Section 4-1</li>
<li>Section 4-2</li>
</ul>
</li>
Bootstrap documentation provides exactly what you're looking for, please have a look :
Bootstrap scrollspy on navbar
Ok, I am really desperate at this point. I've created a submenu for the original Bootstrap dropdown menu:
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Dropdown
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Open submenu >
<ul class="dropdown-menu">
<li>
Submenu link
</li>
</ul>
</li> <!-- / .dropdown-submenu -->
</ul>
</li> <!-- / .dropdown -->
</ul> <!-- / .navbar-nav -->
http://codepen.io/Deka87/pen/ORyRLd
It works as expected until I try to add another submenu dynamically. Please try to click "Add another menu" in the example Codepen. This will add a menu, however, you won't be able to toggle it. Instead it will simply close the current parent menu and that's gonna be it.
Any ideas would be highly appreciated!
Since the item is generated dynamically, you need to select it by a static parent for it to respond to the click event
$(".navbar").on("click", ".dropdown-submenu > a", function(){
....
....
});
I'm trying to get a slight delay on the third level of a dropdown using the bootstrap dropdown menu. Sorry I dont have a fiddle to show but the menu is this structure with products on the top menu dropping down to the list windows, doors, conservatories etc then items windows and doors have a submenu to the right at the third level..
products
|
WINDOWS
--> Casement
--> Tilt and Turn
--> Vertical
DOORS
--> Composite
--> French
--> Sliding
--> Bi-fold
--> Slide & Swing
CONSERVATORIES
ORANGERIES
TILED ROOF CONSERVATORIES
PORCHES
ROOFLINE
I have seen some useful javascripts
<script>
jQuery('ul.nav ul.dropdown-menu').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
jQuery(this).find('dropdown-menu').stop(true, true).delay(200).fadeOut();
});
</script>
which is almost working but it shows both 3rd level menus when the parent is hovered ie when windows is hovererd the windows submenu shows then the doors submenu shows with the delay. Could anybody advise how to adapt the above code?
<li class="dropdown">Products<span class="caret"></span>
<ul class="dropdown-menu">
<li class="visible-xs">All Products</li>
<li>
<a id="caret-one" class="trigger right-caret">Windows</a>
<ul class="dropdown-menu sub-menu">
<li>Casement</li>
<li>Tilt & Turn</li>
<li>Vertical Slider</li>
</ul>
</li>
<li>
<a id="caret-two" class="trigger right-caret">Doors</a>
<ul class="dropdown-menu sub-menu">
<li>Composite</li>
<li>French</li>
<li>Sliding</li>
<li>Bi-fold</li>
<li>Slide & Swing</li>
</ul>
</li>
<li>Conservatories</li>
<li>Orangeries</li>
<li>Tiled Roof Conservatories</li>
<li>Porches</li>
<li>Roofline</li>
</ul>
</li>
I'm dealing with a problem with Bootstrap navbar, where I have multiple dropdowns but I need the actual dropdown-toggles to be links aswell, it works on desktop, but there is a problem with that on mobile, where there is no hover which Im using to show the dropdown.
For example this basic menu:
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
I am controlling the hover dropdown with JQuery.
I want to have the dropdowns shown on mobile automatically, so you can click all of the links.
I used the solution described here on stackoverflow
Problem with that one is that if you have another link or dropdown under the first one, the second one overlays the dropdown menu above it so you can't click it.
Look at this jsFiddle
When the navbar is collapsed, open it and try to hover over the dropdown menu, you can see that the link underneath is highlighted instead.
For some reasone the bottom link element gets expanded, and I can't get rid of it.
Any help would be much appreciated.
I need to make a dropdown toggle with some options, and when the user selects one of those options from dropdown, it either triggers another dropdown toggle to appear right underneath OR Call a Div and display some content.
I have looked at the BS documentation and they don't really go into the triggers or what's needed to call another div or dropdown to display.
Here's a link to jsfiddle on what I have.
I want the second dropdown to only appear when user selects "Option 1" from previous dropdown toggle.
<div class="question">
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Select one <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#" id="opt1" >Option 1</a></li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</div>
<div class="question">
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Another One <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#" id="opt5" >Option 5</a></li>
<li>Option 6</li>
<li>Option 7</li>
<li>Option 8</li>
</ul>
</div>
</div>
Would really appreciate any help I can get.
You have multiple options to do it.
$('.question .visitor li:first-child a').click(function () { // First li of it's parent
$('.opt1').fadeToggle();
});
OR
$('.question .visitor li:eq(0) a').click(function () { // 0 is the first of all relevant elements criteria
$('.opt1').fadeToggle();
});
OR
$('#opt1').click(function () { // Select by ID
$('.opt1').fadeToggle();
});
First off, you'll need to detect a click event on the dropdown box in question, on an <li> if you want that to be the trigger. So:
$( "ul.dropdown-menu li" ).click(function() {
});
Now, whenever an <li> is clicked inside the dropdown-menu, that callback function will be called. Here, if you need another dropdown or a div to appear, use the appendChild() method to add those items where needed. Hope this helps!