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

变体 #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 回答