OK, so. I'm trying to create a dropdown menu of sorts using fadeToggle().
http://westrock.juggernautwebsites.com/ is where the site is currently located.
As you can see, when a user selects 'Properties', the fadeToggle occurs. However, after the dropdown occurs, and a user wants to select a li from the properties dropdown, they are unable to (I know I have return false; set, but that was supposed to be for the original ul, no?)
As well, when the child items are displaying, if you hover over About, the :hover effect displays on the Properties child li.
I'm boggled. Any help, greatly appreciated.
$('#menu-item-13').click(function() {
$(this).children('ul').fadeToggle({
duration: 200
});
return false;
});
*EDIT
I feel like I need to restrict the css and jQuery from affecting children list-items and a, but I don't know how to do this. I thought children only went one level down the DOM, and since I selected 'ul', the function wouldn't affect list-items...
Your example doesn't work at all for me, but if I'm understanding you correctly, you want the child ul to not be affected by the click handler attached to the parent. You can do this:
$('#menu-item-13 > ul').click(function(e){
e.stopPropagation();
// ... do your thing
});
This basically stops the click on the ul from bubbling up to the parent #menu-item-13. Because of this, the fadeToggle will also not trigger from the click on the ul, so if that is still needed you will have to add it to the ul's click.
Thanks for everyone's help! Here's what I eventually ended up using.
$('#primary li').hover(function() {
$(this).children('ul').fadeToggle({
duration: 200
});
});
$('menu-item-54').click(function() {
return false;
});
What I was trying to accomplish upon hover (or click), the subnav would expand open.
Related
I am building a wordpress submenu where the parent item has a compass attached to it, that rotates when the item is clicked. This works fine when it's used on the parent itself, but some items have a submenu.
So I am trying to solve it like this.
$('#menu-main-menu li.submenu li').click(function(event) {
event.preventDefault()
$('#menu-main-menu li a').addClass('disabled');
$(this).closest('.menu-item-has-children a .compass').addClass('rotate-compass');
link_href = this.href;
setTimeout(function () {
$('body').fadeOut(1000, function() {
window.location.href = link_href;
});
},500);
});
What not goes correct is the rotating part, where I attempt to add the rotate to the parent list item div. I tried it with parent, but no luck, so my second thought was to use the closest function to target it, but again no luck. What am i doing wrong here?
-edit-
I added the html structure, since i dont have a print out simply because its generated by wp, its tricky.
Assuming that the link and .compass are children of .menu-item-has-children. You would need to do the following:
$(this).closest('.menu-item-has-children').find('a .compass').addClass('rotate-compass');
Basically you need to find the ancestor and then drill down to find it's descendants as a separate query.
Sorry for the question title, I really didn't know how to summarise it a short description.
Essentially I have got a <ul> which has my navigation links. However in one of the <li> links is my custom dropdown shopping basket to give the user a preview of their items.
Now when I hover over the element , I want it to change the basket from display:none to display:block making it visible. But with my code, as soon as I leave the hovered element to click on an item. The dropdown disappears because I'm no longer hovering over the element I defined in my jQuery hover function.
For example (quick dummy code)
$('.hover-on-me').hover(function(){
$('.hover-open').show();
},function(){
//This right here hides the dropdown
$('.hover-open').hide();
});
Now I'm not the bets at javascript/jQuery. I have tried to say in the function, if the mouse is still on the navigation bar , don't hide it or if the mouse is on the shopping basket then don't hide it. I thought this would let me move from the hover element, past the navigation bar and onto the drop down menu but it doesn't work. as the element then stays open and doesn't close when i leave the area.
Here is a simple jsfiddle demonstrating my problem.
Thanks!
I think there is mistake in your class name only.
jQuery Code :-
$('.hover-on-me').hover(function(){
$(this).parent("li").addClass("active");
}, function(){
$(this).parent("li").removeClass("active");
});
Add this to you CSS Code :-
ul li.active{display:inline-block;}
ul li.active .hover-open, ul li .hover-open:hover{display:block;}
Can you please try these.
the hover syntax will look like this.. $(selector).hover(inFunction,outFunction)
and try to modify your script like this..
$('.hover-on-me').hover(
function(){
$('.hover-open').show();
},
function(){
if(!$('ul').is(":hover") || !$('.hover-open').is(":hover")){
$('.hover-open').hide();
}
}
);
OR
use mouse event function..
$( ".hover-on-me" )
.mouseenter(function() {
$('.hover-open').show();
});
$( ".hover-open" )
.mouseleave(function() {
$('.hover-open').hide();
});
for further details refer here..https://api.jquery.com/hover/#hover2 and https://api.jquery.com/category/events/mouse-events/
Ok... So I have this drop down menu working as I'd like... however I'm trying to figure out how to revert the function back to it's original state after a menu item is clicked.
So first when you trigger the function it does & works great the following:
It swaps out .menu_hide and .lockscreen for .menu_show and .lockscreen_on.
// show and hide mobile menu
$('#triggerMobileMenu').click(function(e) {
e.preventDefault();
// Toggle all 4 classes off or on
$('#mobileMenu').toggleClass('menu_hide menu_show');
$('#mobileScreen').toggleClass('lockscreen_off lockscreen_on');
But now I'm trying to add another piece that says once a menu item is clicked, close the menu and swap the classes back to their original state from .menu_show and .lockscreen_on, to .menu_hide and .lockscreen_off.
$('#mobileMenu ul li a').on('click',function(){
$('#mobileMenu').toggleClass('menu_show menu_hide')({ autoCloseOnClick: true });
$('#mobileScreen').toggleClass('lockscreen_on lockscreen_off')({ autoCloseOnClick: true });
});
});
I should also note that on the same page a scroll to id# may be happening vs just simply taking you to the new url/page. Either case will happen though.
I think that you're making this too complicated. Use the same event handler for both a#triggerMobileMenu and ul#mobileMenu li a since you're having them do the same thing (toggle the visibility of the menu and another element).
$('a#triggerMobileMenu, ul#mobileMenu li a').on('click', function(evt){
evt.preventDefault();
$('#mobileMenu').toggleClass('menu_hide menu_show');
$('#mobileScreen').toggleClass('lockscreen_off lockscreen_on');
});
If you need to know which element was clicked in the event handler, evt.target is available:
if( $(evt.target).is($('a#triggerMobileMenu')) ) {
// do stuff
}
See http://jsfiddle.net/Mph6t/3/
I think it is working as intended. I had to fix some id names that may have been switched in the translation to jsfiddle. Here's a working one as far as I can tell. This leaves the somename2 div still showing. I assume that is going to be blank and just for locking the screen right?
I also changed the link to a new tab for testing purposes. FYI.
Relevant changes are:
$('#somename1 ul li a').on('click',function(){
$('#somename1').toggleClass('menu_show menu_hide')({ autoCloseOnClick: true });
$('#somename2').toggleClass('lockscreen_on lockscreen_off')({ autoCloseOnClick: true });
});
I have created a responsive menu that breaks at 480px and below. I have it to where the following reacts if:
The user clicks on a the "Menu" link.
The menu slideToggles out.
The sub-menus slideToggle out onClick as well.
But you cannot click on any of the pages.
Does this have something to do with the return false?
You may view the example here: http://www.stlredtails.com/construction/
You may need to resize the browser at or belw 480px to see the responsive navigation in action.
Here is the jQuery for the navigation:
jQuery(".navigation ul").hide();
jQuery("#navigation").click(
function() {
jQuery(this).siblings("ul").slideToggle(150, "swing");
return false;
}
);
jQuery(".navigation > ul > li").click(
function() {
jQuery(this).children("ul").slideToggle(150, "swing");
return false;
}
);
Thank you all!
The problem comes from the return false. When you're clicking the links, you're also clicking the ancestors li and ul. Before the link "activates" the functions bound to the ancestors click event execute. Since they return false the default browser behavior (navigating away) is prevented.
There are better solutions for this kind of menu behavior, but using what you already you have (and assuming you won't be changing your html) you can simply add the following to your javascript:
$('.navigation').on('click', 'a:only-child', function(e) {
e.stopPropagation();
});
This searches for all links in the navigation menu that are the only child of their parents (which in this case, happen to be the links you want to continue working as links) and prevents the ancestors click events from executing - the return false shouldn't happen anymore.
I am trying to create a drop down list. I have it working but not fully, using this code:
$(document).ready(function(){
$("#zone-bar li em").hover(function() {
var hidden = $(this).parents("li").children("ul").is(":hidden");
$("#zone-bar>ul>li>ul").hide()
$("#zone-bar>ul>li>a").removeClass();
if (hidden) {
$(this).parents("li").children("ul").toggle()
.parents("li").children("a").addClass("zoneCur");
}
});
});
I managed to make it work so on hover the drop down list will appear, but when you move to select one of the items from the drop down list the drop down list closes. How do I fix that?
It works if I put it to onclick but then you have to click the arrow to close it again. You can see a live example at http://doctorwhohd.com (currently using onclick)
It is likely behaving this way because hover() is intended to take 2 functions. One for mouseenter and one for mouseleave.
When you give it only one, I think it fires the one for both events.
Instead of hover(), use mouseenter().
$("#zone-bar li em").mouseenter(function() {
var hidden = $(this).parents("li").children("ul").is(":hidden");
$("#zone-bar>ul>li>ul").hide()
$("#zone-bar>ul>li>a").removeClass();
if (hidden) {
$(this).parents("li").children("ul").toggle()
.parents("li").children("a").addClass("zoneCur");
}
});
Try putting the hover on
#zone-bar li
and not on the em
Update, yes, you would need to modify the script:
$("#zone-bar li").hover(function() {
var hidden = $(this).children("ul").is(":hidden");
$("#zone-bar>ul>li>ul").hide()
$("#zone-bar>ul>li>a").removeClass();
if (hidden) {
$(this).children("ul").toggle()
.children("a").addClass("zoneCur");
}
});
However, the suggestion of using mouseenter is probably superior, it seems that this causes momentary flicker.
You might want to consider doing this with pure CSS, there is no obvious reason to employ jquery to create this effect.
#zone-bar li{ height:1em; overflow:hidden};
#zone-bar li:hover{ height:auto};