I have a dropdown menu.
On some pages, the link just scrolls to the anchor instead of refreshing the page.
When this happens then dropdown menu is supposed to close. But it does not.
This is my html
<div class="navbar">
<div class="nav_item">
<div class="dropdown menu_item" >
<span class="navbar-submenu"> dropdown</span>
<div class="secondarynav" >
<div class="nav_item">
<div class="menu_item" >
link
</div>
</div>
<div class="nav_item">
<div class="menu_item" >
link
</div>
</div>
</div>
</div>
</div>
<div class="nav_item">
<div class="menu_item" >
link
</div>
</div>
</div>
What is supposed to happen is when a visitor clicks on dropdown, active class is added to the parent nav_item, which then shows the rest of the menu.
When a user clicks dropdown again active is removed and dropdown closes.
$('.dropdown').click(function (e) {
$(this).closest('.nav_item').toggleClass('active');
});
Now the problem, when a visitor clicks dropdown, then any of the children links I would like the active class removed, which currently only happens when the dropdown link is clicked.
I have tried various other methods
$('.nav_item.active > *').click(function(e) {
$(this).closest('.active').removeClass('active');
});
But this glitches with the toggle function in the other scipt. Basically the active is added then removed straight away.
How can I set it so when .dropdown is clicked .active is added to the parent nav_item. But then if any link in that menu is clicked the .active is removed? Thanks
Use e.stopPropagation() to prevent the event on the item from bubbling up to the dropdown.
$('.nav_item.active > *').click(function(e) {
e.stopPropagation();
$(this).closest('.active').removeClass('active');
});
Related
I have a drop down menu in sidebar and it has links as menu items.
When I click a menu item(link) then link works fine but drop down menu gets closed.
But I want that dropdown menu stay opened even after clicking a menu item.
HTML Code:
<div id="sidebar-wrapper">
<div class="sidebar-heading">Start Bootstrap </div>
<div class="list-group list-group-flush">
All orders
<button class="dropdown-btn button">Products
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
View Products
Add New Product
</div>
</div>
</div>
I tried these two following ways:
$('div.dropdown-container a').on('click', function(e) {
e.preventDefault();
});
$('div.dropdown-container a').on('click', function(e) {
e.stopPropagation();
});
But these two ways did not work.
Please help me to resolve it.
try this make sure to put your dropdown id there
$('#dropdownid').on('hide.bs.dropdown', function () {
return false;
});
I have the javascript here for menu toggle
//navicon//
$(document).ready(function(){
$('#nav-icon2').click(function(){
$(this).toggleClass('open');
});
});
Here is the html portion
<header>
<div class="logo pull-left"><img src="images/logo.png" alt="" title=""></div>
<div class="navigation pull-right">
<a href="JavaScript:Void(0);">
<div id="nav-icon2">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</a>
</div>
<div class="menu">
<nav>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 centered text-center">
<ul>
<li><a href="#top" >Home</a></li>
<li>About Design Mania</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div>
</header>
The problem is when i click the hamburger button the menu opens perfectly. I have the website as 1 page scroll. So when clicked on a menu item it goes to that portion perfectly. But still the X button is showing , when again clicked on it the hamburger button appearing and this time menu opens and the hamburger button is showing there , but selecting menu and going to specific portion is not a problem.
So the main problem is once it showing closing button while menu is closed and once showing hamburger while menu is opened and this continues. So everytime it needs 2 clicks to make it perfect.
Here is my menu toggle
//menu-toggle//
$(document).ready(function(){
$(".navigation").click(function(){
$(".menu").slideToggle();
});
});
Please help me.
Since your div #nav-icon2 is inside an anchor a you should prevent the default action :
$(function(){
$('#nav-icon2').click(function(e){
e.preventDefault();
$(this).toggleClass('open');
});
});
Hope this helps.
I have a side-menu on my bootstrap webpage which is open by default.
If the screen is too small there is a button placed behind it to open the menu again.
When a user clicks on a link I would like the menu to close automatically.
The button I already have opens the menu perfectly, but I have no way of closing it?
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"><img src="/content/img/AAA.png" width="27px" />Menu</li>
<li data-ng-hide="!authentication.isAuth">Welcome {{authentication.userName}}</li>
<li data-ng-hide="!authentication.isAuth">Page1</li>
<li data-ng-hide="!authentication.isAuth">Logout</li>
<li data-ng-hide="authentication.isAuth"><span class="glyphicon glyphicon-user"></span> Login</li>
<li data-ng-hide="authentication.isAuth"><span class="glyphicon glyphicon-log-in"></span> Sign Up</li>
</ul>
</div>
</div>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">
Menu
</a>
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
You could add in another event handler for the a elements.
$(".sidebar-nav li a").click(function() {
$("#wrapper").removeClass("toggled");
});
Here are a few things that you could do:
You could use hide/show with jQuery(I can see you are already using it).
Instead of makeing a "toggled" class, Bootstrap has a built in "hidden" class that you could use.
You could also toggle it's css "display" value.
You could use the "animate" class to slide the menu on and off the screen.
You could have a variable to store the state of the menu("true" for out, "false" for in), and change it when the toggle button is clicked.
I had a similar issue, and I placed a close button on the menu, and added a seperate click handler that would close the menu. The close button would then hide with the menu, leaving just the button to open the menu again.
I'm learning jQuery and need advice/help on the creation of a drop down menu. So far I have it set up where I scroll down and the links disappear and a link called "menu" appears.
I would like to know how to have the links slide down when I click on the menu.. I'm not too sure how to go about doing this.
Here's what I have so far
html
<div class="container">
<header>
<nav>
<a href="#">
<span class="menu">Menu</span>
</a>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</nav>
</header>
<div class="blueDiv">
</div>
<div class="redDiv">
</div>
<div class="greenDiv">
</div>
</div>
Javascript
$(window).scroll(function(){
var topScroll = $(this).scrollTop();
if (topScroll >= 3) {
$(".menu").show();
$("ul").hide();
} else{
$("span").hide();
$("ul").show();
}
})
$("a").click(function(){
$("nav.ul").slideToggle();
})
I don't mind list of easy to use plug-ins as well.
You're on the right track, here's a JS Fiddle that expands on the example you provided from CodePen.
All you needed to add was:
$(document).scroll(function(){
$('.navigation').hide();
})
So now your script hides the menu when the page loads:
$(document).ready(function(){
$('.navigation').hide();
Then toggles it on or off when the user clicks it.
$('.box').click(function(){
$('.navigation').toggle();
});
});
Lastly, it hides the menu when the user scrolls.
$(document).scroll(function(){
$('.navigation').hide();
})
If you want to snaz it up a bit, you could use slideToggle instead of toggle to hide and reveal the menu :)
I have 3 tabs, created by js. Active tab has class named "active" and it changes on every click on the tabs
<div class='tab'>
<ul class='tabs'>
<li class="active"><a href='http://link1.com#t1'>First</a></li>
<li><a href='http://link2.com#t2'>Second</a></li>
<li><a href='http://link3.com#t3'>Third</a></li>
</ul>
<div>
<h2>First tab!</h2>
</div>
<div>
<h2>Second tab!</h2>
</div>
<div>
<h2>Thrid tab1</h2>
</div>
</div>
Links returns 'false' by default. I need to create some js function, that enables link (onclick="return true";) on the active tab, and disables it, when I switch to the other tab (li). Appreciate any help.
I can suggest you to check dynamically whether the parent element (in this case li element) has class active and return the negative value
$('#tabs a').on('click', function(){
// if parent has class active returns false
return !$(this).parent().hasClass('active');
});