Reputation: 209
Hello i have a jquery dropdown:
$('div a').hover(function() {
$('.submenu').not(this).children('li').slideUp("slow");
$(this).children('li').slideToggle("slow");
});
right now it is collapsed, when i hover over a menu-item it slides up. How can i make the stating position to be up, and when i hover to slide down.
Also, how can only the submenus below the hovered menu-item collapse. right now when i hover over one, all submenus collapse. I know using "div a" for this is probably not very smart, but i really can't give every toggle-menu-item a different id. So is there a way to tell jquery to only collapse the children of the hovered "div a" ???
I'm a total noob!
Upvotes: 0
Views: 521
Reputation: 25527
Use like this
$('.dropdown-menu').click(function() {
$('.dropdown-menu').not(this).children('ul').slideUp("slow");
$(this).children('ul').slideToggle("slow");
$(".thisismobile").find("a").next().show();
});
$(".thisismobile").find("a").hover(
function() {
$( this ).next().slideDown();
}, function() {
$( this ).next().slideUp(); }
);
Edit
$('.dropdown-menu').click(function() {
$('.dropdown-menu').not(this).children('ul').slideUp("slow");
$(this).children('ul').slideToggle("slow");
$(".thisismobile").find("a").next().show();
});
$(".thisismobile").find("a").hover(function(){
$( this ).next().slideDown();
});
$(".submenu").mouseleave(function(){
$( this ).slideUp();
});
Upvotes: 0
Reputation: 865
First :
$(document).ready(function(){
$(this).children('li').slideToggle("slow"); // seting initial state
$('div a').hover(function() {
$('.submenu').not(this).children('li').slideUp("slow");
$(this).children('li').slideToggle("slow");
});
});
I'm not quite sure to understand your second point maybe you can provide some html.
Upvotes: 0