12

年と月ごとにすべての記事を表示するブログ アーカイブ リストを作成しようとしています (これは 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/

4

2 に答える 2

25

まず問題について：

  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>
于 2012-09-18T16:16:39.190 に答える