0

jQuery Toggleをセットアップするだけです。以下の関数です。それは正常に動作します。基本的に「Show More」をクリックすると、より多くのコンテンツが表示され、「Show More」という単語が「Show Less」に変わります。

$('#toggle').toggle(
        function() {
            $('#content').slideDown();
            $(this).html('Show less →');
        }, 
        function() { 
            $('#content').slideUp(); 
            $(this).html('Show more →');
        }
    );

これは問題ありません。私の問題は、ページに複数あります。何らかの理由で、同じ HTML を複数回コピーして貼り付けて複数のトグル コンテンツを作成すると、他のトグル コンテンツは機能せず、最初のコンテンツのみが機能します。HTMLは次のとおりです。

<div id="team-page">

    Intro paragraph

    <a id="toggle" href="#">Show more &rarr;</a>

    <div id="content">
    Content shown when toggled
    </div>
</div>

したがって、これを複数回複製すると、残りは機能しません。#toggle1 #toggle2 を追加し、jQuery を複製して修正することで回避できますが、より良い方法は何でしょうか? どうもありがとう。

4

1 に答える 1

1 
$('#toggle').toggle( ...

IDセレクターを使用しているため、最初の要素を取得するだけです。ID は一意です。CLASS 'content'を使用する必要があります:

<div class="content">
</div>

コードを変換します：

$('.toggle').toggle( ...
于 2012-07-05T10:19:55.323 に答える