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

use jQuery to expand/collapse ul list - having problems

提问by MrLewk

I'm trying to create a blog archive list which shows all articles by year and month (which I've done with PHP/MySQL)

我正在尝试创建一个博客存档列表，该列表按年和月显示所有文章（我已使用 PHP/MySQL 完成）

Now I'm trying to make it so that on page load, all years are collapsed except the latest year/month and also that each will collapse/expand on click.

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

At the moment my jQuery click function will open or close all of the li elements rather than just the one I click. I'm still pretty new to jQuery so am not sure how to make it just affect the list section that I click on.

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

Any help would be grand!

任何帮助都会很棒！

Here's my code so far (the list is generated from PHP/MySQL loops)

到目前为止，这是我的代码（列表是从 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>?

And here is the jQuery so far:

到目前为止，这是 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();
});


});

I was experimenting with the $(".archive_month ul:gt(0)").hide(); but it didn't work as expected, it would switch the open and closed around.

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

Any help/thoughts?

任何帮助/想法？

Also, here is a fiddle for live example: http://jsfiddle.net/MrLuke/VNkM2/1/

此外，这里是现场示例的小提琴：http: //jsfiddle.net/MrLuke/VNkM2/1/

回答by Zoltan Toth

First about the issues:

先说说问题：

1. ID-s must be unique!
2. You have to properly nest your <li>-s

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

---

---

And here is how you can solve the problem - DEMO

这是您解决问题的方法 - DEMO

jQuery

jQuery

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

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

HTML(fixed)

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>