jquery - 使用 jQuery 展开/折叠 ul 列表 - 遇到问题

Question

我正在尝试创建一个博客存档列表，其中按年份和月份显示所有文章(我是使用 PHP/MySQL 完成的)

现在我正在尝试做到这一点，以便在页面加载时，除最近的年份/月份之外的所有年份都会折叠，并且每个年份都会在点击时折叠/展开。

目前，我的 jQuery 单击函数将打开或关闭所有 li 元素，而不仅仅是我单击的元素。我对 jQuery 还很陌生，所以不确定如何让它只影响我单击的列表部分。

任何帮助都会很大!

这是到目前为止我的代码(该列表是从 PHP/MySQL 循环生成的)

<ul class="archive_year">
<li id="years">2012</li>
    <ul class="archive_month">
        <li id="months">September</li>
            <ul class="archive_posts">
                <li id="posts">Product Review</li>
                <li id="posts">UK men forgotten how to act like Gentlemen</li>
                <li id="posts">What Do Mormons Believe? Ex-Mormon Speaks Out</li>
                <li id="posts">Here is a new post with lots of text and a long title</li>
            </ul>
        <li id="months">August</li>
            <ul class="archive_posts">
                <li id="posts">A blog post with an image!</li>
            </ul>
    </ul>
<li id="years">2011</li>
    <ul class="archive_month">
        <li id="months">July</li>
            <ul class="archive_posts">
                <li id="posts">New Blog!</li>
            </ul>
    </ul>
<li id="years">2009</li>
    <ul class="archive_month">
        <li id="months">January</li>
            <ul class="archive_posts">
                <li id="posts">Photography 101</li>
            </ul>
    </ul>
</ul>​

这是到目前为止的 jQuery:

$(document).ready(function() {

//$(".archive_month ul:gt(0)").hide();

$('.archive_month ul').hide();

$('.archive_year > li').click(function() {
    $(this).parent().find('ul').slideToggle();
});

$('.archive_month > li').click(function() {
    $(this).parent().find('ul').slideToggle();
});


});

我正在尝试 $(".archive_month ul:gt(0)").hide();但它没有按预期工作，它会切换打开和关闭。

有什么帮助/想法吗？

另外，这是一个活生生的例子:http://jsfiddle.net/MrLuke/VNkM2/1/

Answer 1

首先关于问题:

1. ID 必须是唯一的!
2. 您必须正确嵌套 <li> -s

<小时/>

以下是解决问题的方法 - DEMO

jQuery

$('.archive_month ul').hide();

$('.months').click(function() {
    $(this).find('ul').slideToggle();
});

HTML (已修复)

<ul class="archive_year">
<li class="years">2012
    <ul class="archive_month">
        <li class="months">September
            <ul class="archive_posts">
                <li class="posts">Article 1</li>
                <li class="posts">Article 2</li>
                <li class="posts">Article 3</li>
                <li class="posts">Article 4</li>
            </ul>
        </li>
        <li class="months">August
            <ul class="archive_posts">
                <li class="posts">Article 1</li>
            </ul>
        </li>
    </ul>
</li>
<li class="years">2011</li>
    <ul class="archive_month">
        <li class="months">July
            <ul class="archive_posts">
                <li class="posts">Article 1</li>
            </ul>
        </li>
    </ul>
</li>
<li class="years">2009</li>
    <ul class="archive_month">
        <li class="months">January
            <ul class="archive_posts">
                <li class="posts">Article 1</li>
            </ul>
        </li>
    </ul>
</ul>