我需要从 find() 中排除孩子答案

【问题标题】：I need to exclude children from a find()我需要从 find() 中排除孩子
【发布时间】：2013-01-08 13:32:09
【问题描述】：

HTML：

<ul>
    <li class="listExpandTrigger"><h3>2010 - present</h3></li>
    <li class="listCollapseTrigger"><h3>2010 - present</h3></li>
    <li>
    <ul class="volumeList">
        <li class="listExpandTrigger"><h3>Volume 13</h3></li>
        <li class="listCollapseTrigger"><h3>Volume 13</h3></li>
        <li>
        <ul class="issueList">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </ul>
    </li>
</ul>

CSS：

.listCollapseTrigger, .volumeList, .issueList{
    display: none;
}

JS：

$( 'body' ).on( 'click', '.listExpandTrigger', function(){
    $( this ).parent().find( 'ul' ).css( 'display', 'block' );
    $( this ).parent().find('.listExpandTrigger').css('display', 'none');
    $( this ).parent().find('.listCollapseTrigger').css('display', 'block');
});

我意识到使用 Javascript 需要完成更多步骤，但我一开始就遇到了问题。我需要排除子类和 ul，或者只影响它被告知 find() 的第一个实例。现在，该函数会影响触发器父级内部的所有内容，这是有道理的。我只是不确定如何解决它。谢谢！

【问题讨论】：

This thread 似乎涵盖了这个话题。

标签： javascript jquery html css

【解决方案1】：

为什么不将 .next() 方法与 ul 选择器一起使用？

$(this).next("ul").css( 'display', 'block' );

【讨论】：

感谢您的回复，这同样有帮助。我使用 first() 函数只是因为我认为它使代码更加不言自明。否则我让这两种方式（first 和 next）都可以工作，它们都是同样好的解决方案。
我认为使用 first() 可能会在以后引入更多问题。假设您在“volumeList”ul 中再添加两个卷，现在您有 12、13 和 14。如果单击第 13 卷的扩展器，它将错误地扩展第 12 卷上的问题。.next() 似乎更好地匹配功能，但我可能会误解你在这个项目中的用途。

【解决方案2】：

使用first:

$( this ).parent().find( 'ul' ).first().css( 'display', 'block' );

【讨论】：