2015-12-09 28 views
1

点击a.market-metro时,打开最近的ul.children。打开最近ul点击jQuery

<ul class="drop-padding"> 
<li> 
    <a class="market-metro">text</a> 
    <ul class="children">...</ul> 
</li> 
<li> 
    <a class="market-metro">text</a> 
    <ul class="children">...</ul> 
</li> 
<li> 
    <a class="market-metro">text</a> 
    <ul class="children">...</ul> 
</li> 

我有以下但不工作:

jQuery(".market-metro").click(function(){ 
    if (jQuery(".market-metro").closest('li').find('ul.children').hasClass("expanded")) { 
     jQuery(".market-metro").closest('li').find('ul.children').removeClass("expanded").slideUp(250); 
    } else { 
     jQuery(".market-metro").closest('li').find('ul.children').addClass("expanded").slideDown(250); 
    } 
}); 

回答

1

你需要使用$(this) ..你可以使用.next()代替closest and find和使用.not()

$(".market-metro").click(function(){ 
    $('ul.children').not($(this).next('ul.children')).removeClass("expanded").slideUp(); 
    $(this).next('ul.children').toggleClass("expanded").slideToggle(250); 
}); 

Working Demo

注:一定要包括jQuery的

+0

真棒!谢谢你的帮助! :) –

+0

@JoseSalazar欢迎你..好运:) –

+0

@JoseSalazar也许你会需要我的答案在这里http://stackoverflow.com/questions/34097946/how-to-hide-multiple-jquery-toggle - 当 - 我 - 点击之外的最菜单/ 34098193#comment56072421_34098193 –