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
Related
I want to hide my menu by clicking on any part of the web, rather than the menu button here is de js:
mobile_nav.click(function(){
if (desktop_nav.hasClass("js-opened")) {
desktop_nav.slideUp("slow", "easeOutExpo").removeClass("js-opened");
$(this).removeClass("active");
}
else {
desktop_nav.slideDown("slow", "easeOutQuart").addClass("js-opened");
$(this).addClass("active");
// Fix for responsive menu
if ($(".main-nav").hasClass("not-top")){
$(window).scrollTo(".main-nav", "slow");
}
}
});
and the HTML
<div class="inner-nav desktop-nav">
<ul class="clearlist scroll-nav local-scroll">
<li class="active">Home</li>
<li>Who we help</li>
<li>
Services <i class="fa fa-angle-down"></i>
<!-- Sub -->
<ul class="mn-sub to-left" style="background: white !important;">
<li>
Recovery Coaching
</li>
<li>
Coaching and Support for Loved Ones
</li>
<li>
Family and Couples Coaching
</li>
<li>
Interventions
</li>
<li>
LIFE COACHING IN RECOVERY
</li>
<li>
Separation and Divorce Coaching
</li>
<li>
Therapy
</li>
</ul>
<!-- End Sub -->
</li>
<li>About us</li>
<li>WORK WITH US</li>
<li>FAQ</li>
<li>Blog</li>
</ul>
</div>
I wanted a simple code that I can put in that js, because I tried to put in the head tag in the index but its not working, any ideas? I have the CSS too but I think its not relevant at this point, the site is:
http://www.familyaddictionspecialist.com/test/
Is this what you want?
var thatMenu = $('.thatMenu');
$(document).mouseup(function (e) {
if (!thatMenu.is(e.target) && thatMenu.has(e.target).length === 0) {
thatMenu.hide();
}
});
untested but looking at your code, this could work.
the idea is that there is an event handler on the body of the page that when it fires, it checks to make sure you haven't clicked on any child of js-opened, and closes the element with class js-opened.
$(document).ready(function(){
$("body").click(function(event) {
if ($(event.target).parents('div').hasClass("js-opened") === false){
console.log('closed menu');
$('.js-opened').slideUp("slow", "easeOutExpo").removeClass("js-opened");
}
});
});
var $menu = $('.main-nav');
$('mobile_nav').click(function () {
$menu.toggle();
});
$(document).mouseup(function (e) {
if (!$menu.is(e.target) // if the target of the click isn't the container...
&& $menu.has(e.target).length === 0) // ... nor a descendant of the container
{
desktop_nav.slideUp("slow", "easeOutExpo").removeClass("js-opened");
$(this).removeClass("active");
}
});
I have a simple multilevel menu and a script which works to highlight the menu item irrespective of being parent menu or child menu.
In below example when I am on child page then it will only change the colour of child page, while I also want to change the colour or it parent item.
I tried few thing but it is not working as intended.
Here's a codepen of what I have so far.
In case that doesn't work, here's a code snippet:
jQuery(document).ready(function() {
var url = window.location.href;
$('#cssmenu a[href="' + url + '"]').addClass('active-menu');
// Will also work for relative and absolute hrefs
$('#cssmenu a').filter(function() {
return this.href == url;
$(this).parents("li a").addClass('active-menu');
}).addClass('active-menu');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cssmenu">
<div id="menu-button"></div>
<ul>
<li>About Us
</li>
<li class="has-sub">
<span class="submenu-button"></span>Gallery
<ul>
<li>Photo Gallery
</li>
<li>Video Gallery
</li>
<li>Instagram Gallery
</li>
</ul>
</li>
<li>News
</li>
<li>Contact
</li>
</ul>
</div>
UPDATE
Here's my new code, but this works but keeps keeps other links highlighted as well:
$('#cssmenu a').filter(function() {
$(this).parents("li.has-sub").find('a:first').addClass('active-menu');
return this.href == url;
}).addClass('active-menu');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cssmenu">
<div id="menu-button"></div>
<ul>
<li>About Us
</li>
<li class="has-sub">
<span class="submenu-button"></span>Gallery
<ul>
<li>Photo Gallery
</li>
<li>Video Gallery
</li>
<li>Instagram Gallery
</li>
</ul>
</li>
<li>News
</li>
<li>Contact
</li>
</ul>
</div>
I guess, this is what you were after.
var $menu = $("#cssmenu");
//Get the anchor based on the page URL
var $current = $menu.find('a').filter(function() {
return location.href.indexOf(this.href) > -1;
//Or (whatever works)
//return location.href === this.href;
});
//Add it's parent's anchor
$current = $current.add($current.closest("li.has-sub").find(' > a'));
//Set the desired class
$current.addClass('active-menu');
Here is a demo along the same lines.
I have toggle tree which responds on click i.e. show or hide UL>li. I want to hide all the UL --> li who has parent ul-li. To make it more obvious I have apply css background-color to red which I want to be hidden by when page loads but show when it click back.
https://jsfiddle.net/toxic_kz/vr84pd6u/
<div>
<ul class="treeview">
<li><a>System Administration</a></li>
<li>
<a>System Core</a>
<ul>
<li><a>f2</a></li>
<li>
<a>f3</a>
<ul>
<li><a>f4</a></li>
<li><a>f5</a></li>
<li><a>f6</a></li>
</ul>
</li>
<li>
<a>f7</a>
<ul>
<li>
<a>f8</a>
<ul>
<li>
<a>f10</a>
<ul>
<li><a>f11</a></li>
</ul>
</li>
</ul>
</li>
<li><a>f9</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a>MyFunctionA</a>
<ul>
<li>
<a>f12</a>
<ul>
<li><a>f13</a></li>
<li><a>f14</a></li>
</ul>
</li>
<li><a>f16</a></li>
</ul>
</li>
<li><a>Course Management</a></li>
</ul>
</div>
jQuery
<script type="text/javascript">
$(document).ready(function () {
$('.treeview li').each(function () {
if ($(this).children('ul').length > 0) {
$(this).addClass('parent');
}
});
// $('.treeview li.parent>ul li').css('display', 'none');
$('.treeview li.parent>ul li').css('background-color', 'red');
$('.treeview li.parent > a').click(function () {
$(this).parent().toggleClass('active');
$(this).parent().children('ul').slideToggle('fast');
});
});
</script>
If I understood your question correctly, this is what you want:
$(".treeview").find('ul').hide()
Place this in your $(document).ready function and it'll hide the underlying unordered list upon page load.
I Want When User Click On One DropDown All Other open DropDown Get Closed . I looked for answer in google but that is not working for my dropdown i know it's simple but i am unable to this pls help me !!
<div class="hh_drop_down">
<ul class="hh_main">
<li class="hh_main_menu">
Chemicals
<ul class="hh_inner">
<li>Additives / Boosters</li>
<li>Anti-Allergen</li>
<li>Concrete</li>
</ul>
</li>
<li class="hh_main_menu" >
<a class="hh_sf" href="#">Equipment</a>
<ul class="hh_inner">
<li>Deodorization</li>
<li>Duct Cleaning Equipment</li>
<li>Hard Surface</li>
</ul>
</li>
<li class="hh_main_menu" >
<a class="hh_sf" href="#">Accessories</a>
<ul class="hh_inner">
<li>Bonnets/Pads</li>
<li>Brush/Rake/Sponge</li>
<li>Carpet Rakes</li>
</ul>
</li>
</ul>
</div>
And jquery i am using in this :
<script>
$(document).ready(function(){
$(".hh_main").on('click' , '.hh_sf' , function(event){
event.preventDefault();
if($(this).next().hasClass('hh_inner')) {
$(this).next().slideToggle();
}
});
});
</script>
Try this:
HTML:
<div class="hh_drop_down">
<ul class="hh_main">
<li class="hh_main_menu">
Chemicals
<ul class="hh_inner expanded">
<li>Additives / Boosters</li>
<li>Anti-Allergen</li>
<li>Concrete</li>
</ul>
</li>
<li class="hh_main_menu">
<a class="hh_sf" href="#">Equipment</a>
<ul class="hh_inner expanded">
<li>Deodorization</li>
<li>Duct Cleaning Equipment</li>
<li>Hard Surface</li>
</ul>
</li>
<li class="hh_main_menu">
<a class="hh_sf" href="#">Accessories</a>
<ul class="hh_inner expanded">
<li>Bonnets/Pads</li>
<li>Brush/Rake/Sponge</li>
<li>Carpet Rakes</li>
</ul>
</li>
</ul>
</div>
JQuery:
<script>
$(document).ready(function () {
$(".hh_sf").next().addClass("collapsed").slideUp();
$(".hh_main").on('click', '.hh_sf', function (event) {
event.preventDefault();
var currentClass = $(this).next().prop('class');
if (currentClass == "hh_inner expanded") {
$(this).next().removeClass("expanded");
$(this).next().addClass("collapsed");
$(this).next().slideUp();
} else {
$(".expanded").slideUp().addClass("collapsed").removeClass("expanded");
$(this).next().removeClass("collapsed");
$(this).next().addClass("expanded");
$(this).next().slideDown();
}
});
});
</script>
JsFiddle
I opened dropmenu with show and hide and made event on li you can use different way
try this :
JQuery :
$(".hh_main_menu").click(
function(){
$(this).next(".hh_inner").toggle();
if($(this).siblings(".hh_main_menu").children(".hh_inner").css("display")=="block")
{
$(this).siblings(".hh_main_menu").children(".hh_inner").hide();
}
} );
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.