I am creating a navbar for my site with Twitter Bootstrap. I usually use the Dropdown plugin for creating menus with multiple menu-items; but for the menus that I don't want to close unless intentionally done so (e.g. Search box [1]), I use the collapse plugin to create a collapsible menu.
To give you an idea, here's a skeleton of the navbar's markup:
<nav class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
<a class="navbar-brand" href="/">...</a>
</div>
<div class="collapse navbar-collapse">
<!-- Dropdown Menu -->
<ul class="nav navbar-nav">
<li class="dropdown">
Categories
<ul class="dropdown-menu">
<li>Tech</li>
<li>Autos</li>
<li>Travel</li>
</ul>
</li>
</ul>
<!-- Collapsible Menu -->
<ul class="nav navbar-nav navbar-right">
<li id="nav-search" class="collapsible-menu">
<a data-toggle="collapse" data-target="#nav-searchform" class="collapsed" href="#">Search</a>
<div id="nav-searchform" class="collapse">
<!-- Search Form -->
</div>
</li>
</ul>
</div>
</nav>
Please note the comments <!-- Dropdown Menu --> and <!-- Collapsible Menu --> in the code above, which denote the dropdown and collapsible menus respectively.
Problem: If the collapsible menu (which doesn't close unless the menu is clicked again) is open, and user clicks on one of the dropdown menus, both menus are open. I want the collapsible menu to automatically close when the dropdown menu is opened.
How do I do it (with jQuery)?
I've tried these, among others, but none seem to work:
jQuery(document).ready(function($){
$('.dropdown-toggle').click(function() {
$(this).closest('#nav-search').toggleClass('selected');
});
});
and
jQuery(document).ready(function($){
$('.dropdown-toggle').on('show.bs.dropdown', function () {
$(this).closest('#nav-search').children().toggleClass('in');
});
});
and
jQuery(document).ready(function($){
$('.dropdown-toggle').on('show.bs.dropdown', function () {
$(this).closest('#nav-search').children().removeClass('in');
});
});
I am not sure what I am doing wrong.
Footnotes:
If I use Bootstrap's Dropdown plugin for search box too, the dropdown'd close when the user clicks on the input/text area which is why I chose to go with the Collapse plugin.
$('.dropdown').click(function(){
if($('#nav-searchform').hasClass('in'))
$('#nav-searchform').collapse('hide');
});
http://www.bootply.com/122096
Related
I have some Bootstrap Dropdown elements in my navbar that should hide if the user scrolls. However, after calling the toggle method on the dropdown clicking on the dropdown no longer toggles the dropdown.
After pageload you can scroll the page and repeatedly toggle dropdowns via click. If you scroll while a dropdown is open the JS closes the open dropdown. After that point you cannot toggle that dropdown via click. Other dropdowns continue to toggle until you scroll while the dropdown is open.
<nav>
<li class="menu-item menu-item-has-children dropdown">
<span class="dropdown-header"></span>About Our Company
<div role="menu" class=" dropdown-menu">
<div class="container">
<div class="row">
<section class="widget menu-post-widget-2 menu-post-widget-class">
<div class="row">
...
</div>
</section>
</div>
</div>
</div>
</li>
</nav>
The JS:
$(window).on('scroll', function(){
// Close the drop down on scroll
$('nav .dropdown.open').dropdown('toggle');
});
I'm building a layout template for devs to integrate into their AngularJS/Bootstrap application using Bootstrap 3.3.6. This layout features a left side nav contextual menu which slides over the top of the main page content when opened, or optionally can be 'pinned' open, which then pushes main content to the right.
The navigation itself is in the form of an unordered list containing two buttons. The idea is that when a button is clicked, the relevant div for the sub menu contents is toggled to display (using bootstrap 'collapse' and 'in') classes. Any other sub menu content div elements should be set to not display (without the 'in' class).
This is becoming tricky. If you simply click one button or the other exclusively to control it's relevant content element, it works fine, toggling display of the relevant content. However, if you click each button without clicking the same button again to close it's relevant content, the behavior of the content divs is unexpected, where the second nav button clicked overrides the behavior of the first and it's content persists despite clicking the first nav button again.
My expectation is that the menu buttons need to function as true toggles, where only the relevant content is displayed, and all other menu content divs are not displayed.
Below is the markup for the nav and it's relevant content divs:
<div class="filter-bar pull-left">
<ul class="">
<li><!-- NAV ITEM 1 -->
<button type="button"
id="left-nav-toggle-menu"
class="left-nav-toggle mnc-filter-icn"
title="menu">
<i class="fa fa-list-ul fa-fw"></i>
</button>
</li>
<li><!-- NAV ITEM 2 -->
<button type="button"
id="left-nav-toggle-filters"
class="left-nav-toggle mnc-filter-icn"
title="filters">
<i class="fa fa-filter fa-fw"></i>
</button>
</li>
</ul>
</div>
<div class="collapse push-menu-content"><!-- NAV ITEM 1 CONTENT -->
<div class="clearfix">
<button type="button"
class="close left-nav-pin pull-right"
aria-label="Pin">
<i class="fa fa-thumb-tack"></i>
</button>
</div>
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
</ul>
</div>
<div class="collapse push-filter-content"><!-- NAV ITEM 2 CONTENT -->
<div class="clearfix">
<button type="button"
class="close left-nav-pin pull-right"
aria-label="Pin">
<i class="fa fa-thumb-tack"></i>
</button>
</div>
<ul>
<li>Filter 1 Category</li>
<li>Filter 2 Category</li>
<li>Filter 3 Category</li>
</ul>
</div>
Now the js function to toggle the nav content:
$(document).ready(function(){
$("button#left-nav-toggle-menu").click(function(){
$("div.collapse.push-menu-content").toggleClass("in");
});
$("button#left-nav-toggle-filters").click(function(){
$("div.collapse.push-filter-content").toggleClass("in");
});
});
I'm not a js or Bootstrap guru for that matter, I simply used the Bootstrap documentation (collapse and toggleClass) to create these functions. I need help from someone who knows Bootstrap in modifying them so that the nav buttons function as true toggles for the content using Bootstrap and jQuery's built in functionality.
Any help is much appreciated!
If I understand you correctly, you want to remove the .in class from any open divs:
$("button#left-nav-toggle-menu").click(function(){
$("div.collapse.push-filter-content").removeClass("in");
$("div.collapse.push-menu-content").toggleClass("in");
});
$("button#left-nav-toggle-filters").click(function(){
$("div.collapse.push-menu-content").removeClass("in");
$("div.collapse.push-filter-content").toggleClass("in");
});
I'm trying to implement the Bootstrap 3 data-toggle="collapse" on a menu. I have a search bar that uses data-toggle and it works well, but on the menu, although the menu appears and disappears, it doesn't animate. I can't figure out why. I believe I have followed the Bootstrap documentation.
Here is a stripped down version of my code that displays the issue: http://jsfiddle.net/7g7y4ykh/1/
Search bar toggle code:
<a class="btn-search collapsed" data-toggle="collapse" data-target=".search-collapse">
<span class="search-toggle"></span>
</a>
Search bar code:
<div id="topsearch" class="collapse search-collapse">
...
</div>
Menu toggle code:
<a class="btn-navbar" data-toggle="collapse" data-target="#topmenu">
<span class="pancakes"></span>
</a>
Menu bar code:
<div id="topmenu" class="topmenu-nav collapse">
...
</div>
If you click on the search link, a little search bar slides into view. If you click the menu link, the menu just appears - no sliding. How can I make it slide?
I am applying bootstrap tab to my web page. The challenge here is that I have tabs on top and bottom of the tab content.
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-tabs-top">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-tabs-bottom">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
I want the bottom tabs to change accordingly when I click on the top once and visa-versa.
The tab content is changing but the two tabs - top and bottom need to change in tandom i.e when i click on "Profile" on top - it needs to make "Profile" in bottom active
I have tried searching for some solutions using data-target but with no success. I am guessing that javascript or jquery might be needed.
Any suggestion or tips will be appreciated.
Thanks
Try this:
$('.nav-tabs-top a[data-toggle="tab"]').on('click', function(){
$('.nav-tabs-bottom li.active').removeClass('active')
$('.nav-tabs-bottom a[href="'+$(this).attr('href')+'"]').parent().addClass('active');
})
$('.nav-tabs-bottom a[data-toggle="tab"]').on('click', function(){
$('.nav-tabs-top li.active').removeClass('active')
$('.nav-tabs-top a[href="'+$(this).attr('href')+'"]').parent().addClass('active');
})
Result here
Code here
Here's a version that works in Bootstrap 4 (the class "active" is applied to the <a> element, not the <li> element). This version also automatically creates the bottom tabs for you: https://gist.github.com/epicfaace/fa31d5133d3dd89b7f0caf72ebba5af9
As demonstrated in this jsFiddle, I've a nav bar with 2 dropdowns. A link in the first drop down fires a JS click event where I manually show the second drop down. It works, except that after being shown, the second drop down automatically and immediately hides. I've added an alert to give you time to see the second dropdown before it hides.
http://jsfiddle.net/xNkS5/8/
Copy/paste of the JsFiddle code:
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://toujoursplus.be/">Menu</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a id="DropDown1" href="#" class="dropdown-toggle" data-toggle="dropdown">my drop down 1 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a id="SwitchLink">Switch to drop down 2</a></li>
</ul>
</li>
<li class="dropdown">
<a id="DropDown2" href="#" class="dropdown-toggle" data-toggle="dropdown">my drop down 2 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Foo</li>
<li>Bar</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
JavaScript
$(document).ready(function() {
$("#SwitchLink").click(function(e) {
e.preventDefault();// prevent the default anchor functionality
$('#DropDown2').dropdown('toggle');
alert("wait here... see DropDown2 deployed, then close this alert and see it's gone.");
});
});
In case you wonder why I'm doing that: In our application the DropDown2 shows a login form. Sometimes, clicking the menu link in the DropDown1 should make the login form appear.
jQuery 1.9.1 - Bootstrap 3.0.0
Happens on both Chrome and Firefox.
I'm a Bootstrap newbie, and I'm convinced that I'm doing it wrong. Many thanks for your help.
John.
Try this way:
Stop the event from propagating as well. Otherwise it causes the default dropdown handling of bootstrap from being executed which collapses all the dropdowns when you click on the link.
$(".SwitchLink").click(function(e) {
e.preventDefault();
e.stopPropagation();// prevent the default anchor functionality
$('#DropDown2').dropdown('toggle');
alert("wait here... see DropDown2 deployed, then close this alert and see it's gone.");
});
Fiddle
try to add this script on document.ready. wroked for me.
$(function(){
$("[data-toggle=dropdown]").prop('onclick', null).off('click');
$("[data-toggle=dropdown]").click(function (e) {
e.preventDefault();
e.stopPropagation();
let el = $(this);
let expanded = el.attr("aria-expanded") || false;
if (!expanded) {
$(this).dropdown('toggle');
}
});
});