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

选择器如$('.full-story')将选择所有具有 class 的元素full-story。您想要的是引用当前正在单击的元素 using $(this)，然后选择下一个full-storyusing .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 回答