0

それぞれが見出しといくつかのコンテンツを含む、コンテンツの 3 つのチャンクで構成される次のマークアップがあります。

<div class="feed-panels-expanding">
    <div class="feed">

        <section>

            <h2><a href="#">Heading One</a></h2>
            <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin.</p>

            <div class="content">
                <p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor.</p>
                <p>Lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
                <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p>
            </div>

        </section>

        <section>

            <h2><a href="#">Heading Two</a></h2>
            <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin.</p>

            <div class="content">
                <p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor.</p>
                <p>Lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
                <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p>
            </div>

        </section>

        <section>

            <h2><a href="#">Heading Three</a></h2>
            <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin.</p>

            <div class="content">
                <p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor.</p>
                <p>Lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
                <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p>
            </div>

        </section>

    </div>
</div>

各見出しをクリックすると、その下のコンテンツが展開/閉じられるようにします。

jQueryスクリプトが最初の段落以外をすべて非表示にするようにしようとしています。これを行うために、最初の段落を取り、それを の外に移動し.contentます。その後隠れる.content

// feed-panels-expanding
$('.feed-panels-expanding section').each(function() {

    $(this).find('h2 a').click(function() {
        $(this).parent().next('.content').slideToggle(250);
        return false;
    });

    $(this).find('.content p:first').insertAfter($(this).find('h2'));
    $(this).find('.content').hide();

});

pただし、各コンテンツ ブロックの最初の要素を移動することについて、スクリプトが本当に気に入らないことがあります。その行を削除すると、スクリプトは正常に機能し、関連する見出しをクリックするとすべてのパネルが拡大/縮小します。

しかし、そのコード行があると、スクリプトは何もしません。見出しをクリックするalertとステートメントがポップアップ表示されますが、.content要素は無視されます

4

5 に答える 5

3

next()選択した要素の次の要素を探します。そして、それはもはやcontent要素ではありません。次の要素は、挿入した段落です。

$(this).parent().siblings('.content').slideToggle(250);
于 2015-04-21T16:00:58.560 に答える
1

これは動作中の jsfiddleです。

最初のコンテンツ div 以外のすべてのコンテンツ div は、最初は非表示になっています。削除して別の場所に配置する必要はありません。CSS は最初のsection要素を探し、その.content中の div を見つけることで見つけることができます。

jQuery の場合、クリック イベントはsection親要素を探し、その.content中の div を検索して表示を切り替えます。

于 2015-04-21T16:07:53.423 に答える
0

next 次の単一の兄弟要素のみを見て、フィルターを適用します。

今のところ簡単な修正。フィルターで使用nextAllします。.content

$(this).find('h2 a').click(function() {
    $(this).parent().nextAll('.content').slideToggle(250);
    return false;
});

nextAllsiblings後続の要素のみを調べるため、要素が後に続くことがわかっている場合よりも効率的です。

于 2015-04-21T16:03:15.877 に答える
-1

あなたが欲しいのはアコーディオンだと思います。これをチェックしてくださいhttp://inspirationalpixels.com/tutorials/creating-an-accordion-with-html-css-jquery

于 2015-04-21T16:02:38.363 に答える