jquery - 在下拉过程中动态更改列表图标

Question

我有一个下面结构的多层列表。我知道如何动态更改图标，但由于列表的结构，顶层列表不会动态更改。我需要一种方法来从 p class='handle' 上的点击事件中引用第一个 ul 。在这里完整设置 JSfiddle http://jsfiddle.net/Gwbfd/

$(document).ready(function(){
    $('.drawer').hide();
    $('.handle').click(function(){
        $(this).parent().children().not(this).slideToggle('slow');
    });
});

我需要的是对 parent 的引用ul。

列表结构为 UL LI P(clickable) UL LI P(clickable 2nd tier)

当我单击 时，我无法更改第一个 UL <P>。后续会变

就像是

$(this).parent().toggleClass('expanded');

Answer 1

尝试使用.closest('ul')它会给你一个匹配选择器的第一个祖先，即ul. 这是一个稍微更新的小提琴，但我认为你应该再整理一下 html。