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');
});
Related
I have the following CSS code that when the .dashboard-actions class is clicked opens up a dropdown menu. Once clicked the 2nd div in the tree .dropdown changes to class="dropdown open" (indicates the dropdown menu is open/visible), once the user clicks off the open class is removed and the dropdown menu disappears (as expected).
I want to be able using some form of javascript (AngularJS 1.3 or jQuery) be able to do some logic to recognise when the dropdown is 'open' - if so, if a user clicks anywhere else on the screen, for instance the href below the div it will open 'close' the dropdown by removing the 'open' class rather than doing that default action, how could I best approach this?
<div class="dashboard-actions ellipsis">
<div class="dropdown" stop-event>
<div class="dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="material-icons">more_vert</span>
</div>
<ul class="dropdown-menu" aria-labelledby="dropdown1">
<div>
<div ng-include src="'templates/menu.html'" ng-repeat="x in item.x"></div>
</div>
</ul>
</div>
</div>
<div class="interaction-body">
<a href="https://somecdn.com/t51.2885-15/aaa.jpg" ng-href="https://somecdn.com/t51.2885-15/aaa.jpg" target="_blank" stop-event="">
<img ng-src="https://somecdn.com/t51.2885-15/aaa.jpg" src="https://somecdn.com/t51.2885-15/aaa.jpg"></a>
</div>
Hope you are searching for this
//Some code
$('.dropdown-menu').each({
if($(this).hasClass('open')){
// Do something
// $(this).removeClass('open');
}
});
//More code
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");
});
The very top level of my navigation is a horizontal bar of buttons. When the user hovers over the top level, a second level dropdown toggles on. Is there any way to program my navigation so that when the user clicks on a particular second-level item, it will close the second-level container and automatically open a different second-level dropdown elsewhere on the navigation, as if on hover??
In other words, say my top level navigation bar is six horizontal buttons. When the user hovers over button four, they will see a dropdown of various selections. When they click on a particular selection inside that dropdown, it will automatically close the button four dropdown container and open the dropdown container under top-level button five, as if the user was hovering on it?
(I have searched, but turned up nothing I identified as similar to my issue.)
EDIT: adding code per request.
Button four dropdown html:
<li class="top-level">Division4
<div class="drop_1col-topA" title="Menu by category">
<div class="col_A">
<ul>
<li class="second-level">Product1
</li>
<li class="second-level">Product2
</li>
<li class="second-level">Product3
</li>
<li class="second-level">Division 5 Products
</li>
</ul>
</div>
</div>
</li>
Button five dropdown html:
<li class="top-level">Division5
<div class="drop_1col-topA" title="Menu by category">
<div class="col_A">
<ul>
<li class="second-level">Product1
</li>
<li class="second-level">Product2
</li>
<li class="second-level">Product3
</li>
</ul>
</div>
</div>
</li>
I would like it if the user clicks on "Division 5 Products" under button four dropdown and it automatically opens the button five drowdown, as if the user was hovering on it.
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
I am using bootstrap tabs on a custom modal (my own version). The tabs open when clicked the first time the modal is opened, but no longer work the second time the modal is opened.
This is the HTML code for the tabs :
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
What I am doing is :
I have a button in my page, when clicked on it, a modal (like Lightbox) will open with the tabs in it.
The first time it is opened, the tabs are working fine; when tabs are clicked, respective content is displayed. But when it is closed and opened again, the tabs are not working; when the tabs are clicked, the respective data is not being displayed.
Here, I am dynamically adding elements to DOM, when button clicked,but I am not removing elements when CLOSE clicked, So,deleting the element after close is clicked is the solution .