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

Javascriptを使用して完了する手順は他にもあることに気付きましたが、すぐに問題が発生します。子クラスとulを除外するか、find（）に指示されたものの最初のインスタンスにのみ影響を与える必要があります。現在、この関数はトリガーの親内のすべてに影響を与えます。これは理にかなっています。どうやって直せばいいのかわからない。ありがとう！

4

2 に答える 2

4

使用first：

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

ulセレクターで.next（）メソッドを使用してみませんか？

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