0

HTML:

<li class="page_item ">
    <a href="javascript:">A</a>
    <ul class="children">
        <li class="page_item"><a href="">1</a></li>
        <li class="page_item"><a href="">2</a></li>
    </ul>
</li>
<li class="page_item ">
    <a href="">B</a>
    <ul class="children">
        <li class="page_item"><a href="">1</a></li>
        <li class="page_item"><a href="">2</a></li>
        <li class="page_item"><a href="">3</a></li>
        <li class="page_item"><a href="">4</a></li>
    </ul>
</li>
<li class="page_item ">
    <a href="">C</a>
    <ul class="children">
        <li class="page_item"><a href="">1</a></li>
        <li class="page_item"><a href="">2</a></li>
        <li class="page_item"><a href="">3</a></li>
        <li class="page_item"><a href="">4</a></li>
    </ul>
</li>

JS:

$('.page_item').click(function() {
    var that = this;
    $('.page_item').each(function() {
        if (that == this) return true; //continue
        $('.children:not(:hidden)', this).slideToggle();
    });
    $('ul.children', this).slideToggle();
});

オンラインデモ: http://jsfiddle.net/kHLuR/1/

li最初のセクションをデフォルトで開くにはどうすればよいですか?

4

3 に答える 3

1

次のコードを追加して、ページの読み込み時にクリック イベントをシミュレートします。LIVE DEMO

$(document).ready(function () {
    $('a').eq(0).trigger('click');
});
于 2013-03-29T09:23:17.377 に答える
1

バリアント #1純粋な CSS ソリューション:

.page_item:first-child .children {
    display: block;
}

デモ: http://jsfiddle.net/dfsq/kHLuR/7/

注: :first-childIE8+ で動作します。古いバージョンをサポートする必要がある場合は、最初の li に別のクラスを与えることができます<li class="page_item page_item-first"> 。

バリアント #2。最初にクリック イベントをトリガーします.page_item。

$('.page_item').click(function () {
    // ...
})
.filter(':first').click();

デモ: http://jsfiddle.net/dfsq/kHLuR/8/

于 2013-03-29T09:27:21.643 に答える
0

jQuery の .ready() を使用して、ページが読み込まれた直後にコードを実行できます。http://api.jquery.com/ready/をご覧ください

于 2013-03-29T09:23:48.007 に答える