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 回答