So I have this vertical menu that slides down when you click on the parent item to display the children elements and when you click on a child element it takes you to the link.
My problem is that when you click on the link the whole submenu slides up because of the slideToggle function on it - how can I stop the slide up from happening only if a link is clicked?
My Menu:
<ul id="menu-top" class="menu">
<li class="has-submenu">
Portfolio
<ul class="sub-menu" style="display: none;">
<li class="menu-item">
Book I
</li>
</ul>
</li>
<li class="has-submenu">
Headshots
<ul class="sub-menu" style="display: none;">
<li class="menu-item">
Men
</li>
</ul>
</li>
<li class="regular-link">
Personal Work
</li>
</ul>
JS:
jQuery('#menu-top').children().click(function(e){
var $next = jQuery(this).find('.sub-menu');
var $child =('.active-menu');
$next.stop().slideToggle('slow').toggleClass('active-menu');
jQuery(".sub-menu").not($next, $child).slideUp('slow').removeClass('active-menu');
});
jQuery('.has-submenu > a').click(function(e){
e.preventDefault();
});
Use stopPropagation to prevent the event from bubbling.
jQuery('.submenu a').click(function(e){
e.stopPropagation();
});
To stop the slideToggle menu from sliding up when clicking the ul's children links, you can use the jquery function stopPropogation() on the click event of the link itself.
$(".shop-by-dept ul li a").click(function(e){
e.stopPropagation();
});
This will prevent the slideToggle() action from sliding the menu up, while the browser loads the next page.
Related
I need to open a submenu, clicking on the parent element. I could do it this way
$(function(){
$('li.dropdown > a').on('click',function(event){
event.preventDefault();
$(this).toggleClass('selected');
$(this).parent().find('ul').first().toggle(300);
$(this).parent().siblings().find('ul').hide(200);
//Hide menu when clicked outside
$(this).parent().find('ul').parent().mouseleave(function(){
var thisUI = $(this);
$('html').click(function(){
thisUI.children(".dropdown-menu").hide();
thisUI.children("a").removeClass('selected');
$('html').unbind('click');
});
});
});
});
But, sometimes I have an actual link as a parent element. And I'd want to go to that link on click. And open the dropdown otherwise. Tried with a click on dropdown:before/ dropdown:after pseudoelements with no luck. And I can't manage to do it adding a span inside dropdown div.
Thank you for any help.
LE: My HTML structure looks like this
<nav id="main-nav">
<ul>
<li>Home</li>
<li class="dropdown">Main Cat
<ul class="dropdown-menu">
<li>Sub Cat1</li>
<li>Sub Cat2</li>
<li>Sub Cat3</li>
</ul>
</li>
<li>Second Cat</li>
</ul>
</nav>
I'm relatively new to JS and I can't figure out how to close a submenu when clicked again (or if anything else is clicked, like the button which makes the menu appear.
With this thread here on Stackoverflow I managed to open the submenu on click on the parent, but how can i close it again by click it again? Other threads that I found by google didn't help me at all...
HTML
<ul id="menu">
<li>Home</li>
<li>In the news
<ul>
<li>Youtube</li>
<li>Blog</li>
</ul>
</li>
<li>Who's Who?
<ul>
<li>Youtube</li>
<li>Tackle Hunger Tackle Hunger</li>
</ul>
</li>
<li>Services Offered</li>
JS
function initMenu() {
$('#menu ul').hide();
$('#menu li a').click(
function() {
$('#menu ul').hide('normal');
$(this).next().slideToggle('normal');
});
}
$(document).ready(function() {
initMenu();
});
When I click it again, it closes and then opens up again... Really thanks a lot for helping me with this problem!
Here is also the jsfiddle of the other thread
Simply add an if and check if the next element is hidden.
Without the if, you will trigger hide and show twice by clicking on the same element.
function initMenu() {
$('#menu ul').hide();
$('#menu li a').click(function() {
$('#menu ul').hide('normal');
// check if the next element is hidden
if($(this).next().is(":hidden")) {
$(this).next().slideToggle('normal');
}
});
}
$(document).ready(function() {
initMenu();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li>Home</li>
<li>In the news
<ul>
<li>Youtube</li>
<li>Blog</li>
</ul>
</li>
<li>Who's Who?
<ul>
<li>Youtube</li>
<li>Tackle Hunger Tackle Hunger</li>
</ul>
</li>
<li>Services Offered</li>
</ul>
I have bootstrap 3 menu. And I want to add class to "dropdown" menu if usre click on "caret" ( parent menu item )
<ul id="menu-testing-menu" class="nav navbar-nav sf-js-enabled" style="touch-action: pan-y;">
<li class="menu-item menu-item-has-children dropdown">
<a class="sf-with-ul" data-toggle="dropdown">Home<span class="caret"></span></a>
<ul class="dropdown-menu" style="display: none;">
<li class="menu-item">
Lorem Ipdum
</li>
<li class="menu-item">
Lorem Ipdum
</li>
<li class="menu-item">
Lorem Ipdum
</li>
</ul>
</li>
</ul>
So I try to use js
$('#menu-testing-menu li a .caret').click(function(e){
e.preventDefault();
$(this).find('.dropdown-menu').toggleClass('dd-menu-show');
});
but it doesn't work. How to solve thise problem?
$(this).find('.dropdown-menu') is not possible when clicking .caret because $(this) is looking inside the current element and it is empty.
You might also want to consider adding the click event to the entire <a>.
Try this
$('#menu-testing-menu li a .caret').click(function(e){
e.preventDefault();
var parent = $(this).closest('.dropdown');
parent.find('.dropdown-menu').toggleClass('dd-menu-show');
});
.find() searches for a node inside the selected node. You are selecting the .caret span element, so it's trying to find a .dropdown-menu node inside that, which of course does not exist. You'll want to navigate up the tree to the .dropdown node, and then do your find() call.
$(this).find(".dropdown-menu") will not work because there is no element in the current clicked element with class dropdown-menu.
So just try :
$('#menu-testing-menu li a .caret').click(function(e){
e.preventDefault();
$('.dropdown-menu').toggleClass('dd-menu-show');
});
You can do it in this way.
$('#menu-testing-menu li a .caret').click(function(e){
e.preventDefault();
$(this).parent().next('.dropdown-menu').toggleClass('dd-menu-show');
});
I'm trying to add "active" class to menu when user clicks on the button but for some reason it's not working correctly. They have to click really fast and two times. I've tried both click and on click function but still not working.
$('#menu li').click(function() {
$('#menu li.active').removeClass('active');
$(this).addClass('active');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" id="menu">
<li class="nav active">Home
</li>
<li class="nav">About
</li>
<li class="nav">Services
</li>
<li class="nav">Gallery
</li>
<li class="nav">Contact
</li>
</ul>
</div>
you must handle active li after page loaded.Add this at the end of your code:
var curruntLocation = window.location.href;
$('#menu li a').each(function ()
{
var thisHref = $(this).attr('href');
if (curruntLocation.indexOf(thisHref) > 0)
{
$(this).parent().addClass('active');
}
});
The links included in the menu items are reloading the page while clicking and when the page is reloaded, the initial setting comes first. You can use preventDefault() if you'd like to run the function but then, your links won't work.
I suggest you use anchors instead of query string.
my dropdown menu is closing when I click/touch the inside links. The dropdown menu is inside a flyout navigation menu. I am using slideToggle. So when you scroll down the page the flyout navigation apears fixed to the top of the page. Inside the flyout nav is a dropdown menu. This is the menu that is closing when links are clicked. The flyMenu, flyNav, flyShop and flyShoplist are the classes involved. How can I stop flyShopList from closing and go to the chosen link?
edit - Im sorry I failed at making my question clear. the main navigation works fine. its the flyout dropdown. so when I click on the flyMenu the flyNav slides out and stays open. then when I click flyShop the flyShopList slides out, then when I try to click the links inside the flyshoplist there is no redirect and the flyshoplist closes. how can I get the links to work and not close the menu?
Here is a jsfiddle http://jsfiddle.net/adod4ycz/6/
Here is the HTML
<div class="menu">Menu</div>
<div class="nav">
<ul>
<li>Home
</li>
<li>About
</li>
<li class="shop"><span>+</span>Shop
<ul class="shopList">
<li>website
</li>
<li>Collection
</li>
<li>Dresses
</li>
<li>Rompers
</li>
<li>Jumpsuits
</li>
<li>Leggings
</li>
</ul>
</li>
<li>On Sale
</li>
<li>Wholesale
</li>
<li>Retailers
</li>
<li>Contact
</li>
</ul>
</div>
<aside>
<div class="flyMenu">Menu</div>
<div class="flyNav">
<ul>
<li>Home
</li>
<li>About
</li>
<li class="flyShop"><span>+</span>Shop
<ul class="flyShopList">
<li>New Arrivals
</li>
<li>Collection
</li>
<li>Dresses
</li>
<li>Rompers
</li>
<li>Jumpsuits
</li>
<li>Leggings
</li>
</ul>
</li>
<li>Wholesale
</li>
<li>Retailers
</li>
<li>Contact
</li>
</ul>
</div>
</aside>
Here is my JS
$(window).scroll(function () {
if ($(this).scrollTop() > 125) {
$('aside').addClass('asideMenu');
} else {
$('aside').removeClass('asideMenu');
}
});
$(document).ready(function () {
//regular nav menu
$('.menu').click(function () {
$('.nav').slideToggle("fast");
});
$('.shop').click(function () {
$('.shopList').slideToggle(30);
$("a span", this).text() == "+" ? $("a span", this).text("-") : $("a span", this).text("+");
});
//flyout nav menu
$('.flyMenu').click(function () {
$('.flyNav').slideToggle("fast");
});
$('.flyShop').click(function () {
$('.flyShopList').slideToggle(30);
$("a span", this).text() == "+" ? $("a span", this).text("-") : $("a span", this).text("+");
return false;
});
});
You need to pass an event to the action and add event.stopPropagation() to prevent the event from bubbling up the DOM and triggering a parent's listener
$('.shop').click(function (event) {
event.stopPropagation();
$('.shopList').slideToggle(30);
$("a span", this).text() == "+" ? $("a span", this).text("-") : $("a span", this).text("+");
});
FIDDLE