2

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');
});

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

4

2 回答 2

4

使用first：

$( this ).parent().find( 'ul' ).first().css( 'display', 'block' );
于 2013-01-24T17:42:38.483 回答
2

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

$(this).next("ul").css( 'display', 'block' );
于 2013-01-24T17:45:13.677 回答