I want to create a java-script-Drop-Down-Menu for a mobile site.
The problem is, that when I click on a list-item in level2, by the toggle of level1 the list-item of level2 (and level3) gets closed, so I have to click at the list-item of level1 again to see level2 and level3. How can I deactivate the toggle of level1 if I click on a list-item of level2?
Please point me to the right direction. Thank you!
Here's my html:
<div id="menu">
<ul>
<li class="level1"><a href="/xyz.html">
<li class="level1"><a href="/xyz.html">
<ul>
<li class="level2"><a href="/xyz.html">
<li class="level2"><a href="/xyz.html">
<ul>
<li class="level3"><a href="/xyz.html">
<li class="level3"><a href="/xyz.html">
</ul>
<li class="level2"><a href="/xyz.html">
</ul>
<li class="level1">
<li class="level1">
</ul>
</div>
Here's my jquery:
$(document).on('pageinit',function(e,data){
// close menu if you go to another page
$('#menu').hide();
$('.level2').hide();
$('.level3').hide();
// Do not link if a sub-menu is present
$('li:has(ul) > a').replaceWith(function() {
return $(this).text();
});
// at click on menu-button scroll to top and open menu
$(document).off('click', '#menuicon').on('click', '#menuicon',function(e) {
$('html, body').stop().animate({ scrollTop : 0 }, 0);
$('#menu').slideToggle(400);
});
// elements of the menu, different sub-menus width different classes
$('#menu').on('click','.level1',function(e) {
$(this).find('.level2').slideToggle();
});
$('#menu').on('click','.level2',function(e) {
$(this).find('.level3').slideToggle();
});
$('#menu').on('click','.level3',function(e) {
$('.level3').hide();
$('.level2').hide();
$('.level1').hide();
$('#menu').hide();
});
});
use e.stopPropagation();
$('#menu').on('click','.level1',function(e) {
e.stopPropagation();
$(this).find('.level2').slideToggle();
});
$('#menu').on('click','.level2',function(e) {
e.stopPropagation();
$(this).find('.level3').slideToggle();
});
$('#menu').on('click','.level3',function(e) {
e.stopPropagation();
$('.level3').hide();
$('.level2').hide();
$('.level1').hide();
$('#menu').hide();
});
Related
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 the following scripts in my dropdown menu:
<script type="text/javascript">
jQuery(window).load(function() {
$("#nav > li > a").click(function () { // binding onclick
if ($(this).parent().hasClass('selected')) {
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
} else {
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
if ($(this).next(".subs").length) {
$(this).parent().addClass("selected"); // display popup
$(this).next(".subs").children().slideDown(200);
}
}
});
});
</script>
HTML
<div class="menu">
<span>
<ul id="nav">
<li>Produk Teknik <i class='icons icon-right-dir'></i>
<div class="subs">
<div class="wrp3">
<ul>
<li><h3>Manometer</h3>
<ul>
<li><a href='#'>tes</a>
<ul>
<li><a href='#' class='anak'>tes-1</a></li>
</ul>
</li>
<li><br /></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</span>
I need to change that script so that when we click all place, the dropdown menu will automatically be closed. Thank you
You can see my project example http://www.tokobesi.co.id/beta/
I think this is what you meant mate..Try this.. :)
$(document).click(function(e){
if( $(e.target).closest(".menu").length > 0 ) {
return false;
}else{
$("#nav .selected").removeClass("selected");
}
});
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
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.
I have the following simple 3 level menu structure:
<nav class="main-nav" class="list">
<ul>
<li class="first lev1">Home</li>
<li class="lev1">Lev 1 1</li>
<li class="lev1 hasc active">
Lev 1 2
<ul>
<li class="first lev2 hasc">
Lev 2 1
<ul>
<li class="first lev3">Lev 3 1 </li>
<li class="lev3">Lev 3 2</li>
</ul>
</li>
</ul>
</li>
<li class="lev1 hasc active">Lev 1 3</li>
</ul>
</nav>
I'm trying to make the menu work so that the second level menu slides open when it has children but is an active link when it does not and then all 3rd level links are always active links.
The following jquery code works for all the required functionality for the 2nd level menu (prevents default and opens the 3rd level if there are children, but if not makes the link active) the problem is that i'm not sure how to over ride the prevent default for the third level?
$(".lev2").click(function (event) {
event.preventDefault();
if ($(this).hasClass('on')) {
$(this).children('ul').slideUp();
$(this).removeClass('on');
} else {
$(this).children('ul').slideDown();
$(this).addClass('on');
}
});
I've looked into starting at the root of the menu class 'main-nav' and then try to branch the code but as it is nested I'm not finding any logic that will work? any ideas most welcome.
The problem seems to be that you´re binding the click event to the entire li element and not just the link.
Try this instead:
$(".lev2 > a").click(function (event) {
event.preventDefault();
$(this).parent().toggleClass('on').children('ul').slideToggle();
});
It binds the event to the link and toggles your actions on the parent li and ul for the next level.
Live example at jsFiddle
This works. Just checks for a level 3 click first to tell the level 2 function whether level 3 has been clicked or not.
$(document).ready(function(){
var level2 = true;
$("li.lev3").click(function(){
level2 = false;
});
$("li.lev2").click( function(event){
if (level2){
alert ("lvl2");
event.preventDefault();
if($(this).hasClass('on')) {
$(this).children('ul').slideUp();
$(this).removeClass('on');
}else{
$(this).children('ul').slideDown();
$(this).addClass('on');
}
}
});
});