Question

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？

Answer 1

添加此代码以在加载页面时模拟点击事件： LIVE DEMO

$(document).ready(function () {
    $('a').eq(0).trigger('click');
});

Answer 2

变体＃1 纯CSS解决方案：

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

演示：http://jsfiddle.net/dfsq/kHLuR/7/

注意：:first-child适用于IE8 +。如果您需要支持旧版本，则可以为您的第一个版本提供另一个课程，例如：<li class="page_item page_item-first"> http://jsfiddle.net/dfsq/kHLuR/9/

变体＃2。在第一个.page_item上触发点击事件：

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

演示：http://jsfiddle.net/dfsq/kHLuR/8/

Answer 3

您可以使用jQuery的.ready（）在页面加载后立即执行代码。看看http://api.jquery.com/ready/

页面加载时打开第一部分

3 个答案: