обход к элементу ближе к элементу щелкнул JQuery

Question

У меня есть такая установка в моем HTML

<section class="grp"> 
    <ul class="normal"> 
    <li>Normal Thing <button class="toggle-advanced">toggle advanced</button></li> 
    </ul> 
    <ul class="advanced"> 
    <li>This is Advanced</li> 
    </ul> 
</section> 
<h1>Another Thing</h1> 
<section class="grp"> 
    <ul class="normal"> 
    <li>Normal Thing <button class="toggle-advanced">toggle advanced</button></li> 
    </ul> 
    <ul class="advanced"> 
    <li>This is Advanced</li> 
    </ul> 
</section> 

Как я могу переключить «продвинутые» ul если я нажал на кнопку в ul.normal?

Я попробовал, как это в CoffeeScript

$('.normal').on 'click', '.toggle-advanced', (e) -> 
    $(@).closest('.grp').siblings('.advanced').slideToggle(); 

Answer 1

так JQuery помечено ... с помощью Jquery

$('.toggle-advanced').click(function(){ 
    $(this).parents('ul.normal').siblings('ul.advanced').toggle(); 
}); 

или

$('.toggle-advanced').click(function(){ 
    $(this).parents('.grp').find('ul.advanced').toggle(); 
}); 

они должны работать, если вы Aree не добавляя содержимое динамически .. использовать on() если динамически добавлено

$('.normal').on('click', '.toggle-advanced', function(){ 
    $(this).parents('.grp').find('ul.advanced').toggle(); 
}); 

Answer 2

.advanced не родственный .grp элемента, это родной брат родителя .normal элемент

$(@).closest('.normal').siblings('.advanced').slideToggle(); 

Javascript равно будет

$('.normal').on('click', '.toggle-advanced', function(){ 
    $(this).closest('.normal').siblings('.advanced').slideToggle(); 
}) 

Answer 3

вы можете попробовать это

$(".toggle-advanced").on('click', function(){ 

    $(this).closest(".normal").siblings('.advanced').slideToggle(); 

}); 

Этот код jquery основан

Answer 4

Это должно работать.

$("ul.normal>li>button").click(function() { 
    $(this).closest('.normal').siblings('.advanced').slideToggle(); 
}); 

Рабочий пример: http://jsfiddle.net/riri78/dQcFE/

Answer 5

В Jquery, вы можете использовать родителю и братьев функции, чтобы добраться до нужного элемента.

Попробуйте это:

$('.toggle-advanced').click(function() { 
    $('this').parent().siblings().toggleSomething() 
}); 

братьев возвращает все братья и сестры для данного элемента, который в вашем случае всегда будет возвращать «продвинутым» ул.