0

以下のコードを使用および変更しました。私が必要としているとおりに機能しますが、同じページで複数回使用すると、すべての抜粋が同時に開きます。クリックされたアイテムだけを停止して開くには、その理由と、何をする必要があるか知っていますか?

HTML:

<article class="excerpt">
   <h2>Title</h2>
   <p>This is a sentence...</p>
   <div class="full-story">
      <p>This is the rest of the first sentence...</p>
   </div>
   <a class="excerpt-trigger" href="#">Read More</a>
</article>

jQuery:

$('.full-story').hide();

$('.excerpt-trigger').toggle(function() {
  $('.full-story').fadeIn('slow');
  $(".excerpt-trigger").removeClass("is-more");
  $(".excerpt-trigger").addClass("is-less");
  $(this).text("Less info");
}, function() {
  $('.full-story').hide('fast');
  $(".excerpt-trigger").addClass("is-more");
  $(".excerpt-trigger").removeClass("is-less");
  $(this).text("More info");
});

申し訳ありませんが、抜粋トリガー クラスを除外しました。更新しました。

4

1 に答える 1

3

のようなセレクターは、 class を持つすべての要素を$('.full-story')選択します。必要なのは、 を使用してクリックされている現在の要素を参照し、 を使用して次の要素を選択することです。を使用してその子を選択し、 を使用して前の要素を選択できます。full-story$(this)full-story.next('.full-story').children().prev()

あなたの場合、次のようになります。

$('.excerpt-trigger').toggle(function() {
    var ref = $(this); // Caching is good.
    ref.prev('.full-story').fadeIn('slow');
   ref.removeClass("is-more").addClass("is-less").text("Less info");
}, function() {
    var ref = $(this);
    ref.prev('.full-story').hide('fast');
    ref.addClass("is-more").removeClass("is-less").text("More info");
});

.next()、.children()およびに関するドキュメントは次のとおりです.prev()。

さらに、 をクリックしたときにイベントがバブリングしない<a>ようにして、href="#"命令が引き継がれないようにすることもできます。event.preventDefault()を確認してください。

于 2012-12-13T15:43:39.163 に答える