使用jQuery展开/折叠ul列表-存在问题

我正在尝试创建一个博客归档列表，它按年份和月份显示所有文章（我已经用PHP/MySQL完成了这项工作）

现在，我正试图使页面加载时，除了最近的年/月之外，所有年份都会折叠，并且每个年份都会在单击时折叠/扩展

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

任何帮助都是伟大的

以下是我到目前为止的代码（列表是从PHP/MySQL循环生成的）

我正在试验$（“.archive\u month ul:gt（0）”）.hide（）；但它并没有像预期的那样工作，它会打开和关闭开关

有什么帮助/想法吗

---

此外，这里还有一个实时示例：

首先介绍问题：

ID-s必须是唯一的

您必须正确地嵌套

-s

---

下面是解决问题的方法-

jQuery

HTML（已修复）

2012年

九月

第1条
第2条
第三条
第四条


八月

第1条




2011年

七月

第1条




2009年

一月

第1条

一个提示，ID必须是唯一的。您正在使用它们，例如：

id=“years”

&

id=“months”

。此外，您的内部

ul

标签必须是

li

标签的子标签。我不知道您试图做什么，但正如j08691所说，id应该是唯一的，也许这就是您试图做的？@adeneo-是的，这基本上就是我想要的，除了没有手风琴效果。JohnKalberer&j08691-谢谢你的指点-我忽略了愚蠢的错误！谢谢你！以及修复列表代码-学童错误：s

<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>​

$(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').hide();

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

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