I have a menu and when I click a link that has a submenu, I want to toggle it. And I did that, however I have more submenus with the same class and when I click one all of them toggles.
I managed to toggle only the clicked element but in this case I need to toggle the children.
Here is the js code I have:
$('li.has-submenu a.link').click(function() {
$('.submenu').slideToggle(500);
});
And here is a quick fiddle of the situation:
http://jsfiddle.net/TV5Kk/
Thanks!
jsFiddle DEMO
$(this).next('.submenu').slideToggle(500);
Since you have multiple elements with class submenu use $(this) to get the relative element. In your mark up, the next element to the link happens to be one you wanted to toggle.
UPDATE:
Since OP wants to automatically slide up all others.
DEMO here
$('li.has-submenu a.link').click(function() {
$('.submenu').slideUp(500);
$(this).next('.submenu').slideToggle(500);
});
Related
I am having some minor issues while working with jquery. The code below is supposed to open the submenu list when the user clicks on the menu item. But when the user clicks on one of the menu items, it opens all other submenus as well:
$(document).ready(function(){
$(".mobile-main-menu-item-container").click(function(){
$(".mobile-main-menu-subitem-list-container").slideToggle();
});
});
I have to tell that I am not surprised that it is acting like that, because the same class is used for all menu items. I just want to ask what I have to change in the code so that only one submenu is opened. For sure, there is a better way to write the code instead of assigning different ID-s for each of them.
Thanks in advance for your help.
Inside the click function, use this to isolate the scope of your subitem class to only children (and grandchildren, etc.) of the item clicked.
$(document).ready(function(){
$(".mobile-main-menu-item-container").click(function(){
$(this).find(".mobile-main-menu-subitem-list-container").slideToggle();
});
});
I got a problem with my jQuery, I need a little help. Check the menu at the following link.
I use slideToggle and when you press the first button it slideToggle a submenu (works fine). But I am finding a way to hide that submenu when the other button is pressed. (I tried a lot for solving it, I got close...) I tried toggling on that other button but it gets bugged somehow anyone ideas? I got the code here:
jQuery:
//select all the `<li>` element that are children of the `.parent` element
$('.parent').children().click(function(){
//now find the `.child` elements that are direct children of the clicked `<li>` and toggle it into or out-of-view
$(this).children('.child').slideToggle('slow');
});
I am trying to do a show/hide animation. 1st div will show and 2nd div hide for first time then when i will "details" button which is in 1st div then show 2nd and same when i click "close" button which is in 2nd div then show 1st div and hide 2nd div. i did that no problem but i want to add some css effect when it will show and hide exmple like http://tympanus.net/Tutorials/OriginalHoverEffects/index7.html there have many cool effect all are base on rollover effect i want to this on my click.. can you guess help me how to do..
Basic example here: http://jsfiddle.net/Q5e76
$("#details").click(function () {
$(".one").hide();
$(".two").show();
});
$("#close").click(function () {
$(".two").hide();
$(".one").show();
});
Instead of using .show(); and .hide(); you could use .fadeIn(n) and .fadeOut();
where n is the number of miliseconds it will take.
e.g.
$('.one').fadeOut(500); // half a second.
PS: if these are unique, you should give them ID's to prevent an interaction being executed on multiple elements.
Also it will help yourself if you give your elements proper names.
e.g. id="detail-box" for instance.
Building a simple Multilevel push menu based on CSS classes, It has no javascript animations and runs on CSS transform/transitions. It works fine on every part other than toggling the is-open classes.
When a user clicks on a link, it should first remove the .is-open class. Then add it so the animation activates.
If i say change the .is-open class in the second stage to .addClass("foo"); it has no problem removing the .is-open class and adding the .foo class. So i'm wondering what the problem is with this section of the code.
You can find the code here http://jsbin.com/EjUQ/2/
On the demo you'll find that menus without a submenu load nothing. This is the correct behavior. The problem I'm having is that I would like the Menu to close before opening a new one. So removing the .is-open class then applying it again.
e.g
Link 1, 4,7 don't have submenu's so nothing with open on click/touch, clicking the menu button will prompt nothing to happen. This is the correct behaviour.
Link 2,3,5,6 have submenu's, so it opens on click/touch and the menu button will toggle the menu to open/close.
Hopefully someone can point me the direction of what i'm doing wrong. Thanks.
You should utilize the transitionend event. So that you listen for the animation to complete before adding the 'is-open' class back to the sidebar and content. Ex:
sidebar.one('transitionend', function() {
sidebar.addClass("is-open");
content.addClass("is-open");
});
Now, what I have here isn't perfect, but I believe it conveys the concept: http://jsbin.com/EjUQ/9
I'm using the following tutorial: http://www.script-tutorials.com/css3-metal-menu-with-icons/
The problem is that when I click any element on the submenu, the submenu won't close. My app is using a jQuery UI tab to dynamically add a tab with the content as one partial view (mvc4) so that the app page isn't reloaded. I would like to hide the submenu when an item is clicked, how can i do that?
The submenus are all located in a div with class named subs. You could hide that with JQuery.
$('html').click(function() {
$(".subs").hide();
});
All clicks, anywhere should now hide the submenus or any other element with the class subs
Since you're using jQuery, I would do something like traversing the parents if you know the exact depths, using a click event handler (where e is the event):
$(e.target).parent().parent().hide(), etc
If it could be dynamic, you can do it slightly less efficiently, but in one go:
$(e.target).parents('.thedropdownmenuclass').hide()