Question

使用并修改了以下代码。完全按照我需要的方式工作，但是当我在同一页面上多次使用它时，它会同时打开我的所有摘录。有没有人知道为什么，以及我需要做什么才能停止并仅在已点击的项目上打开？

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");
});

抱歉，遗漏了摘录触发器类。更新。

Answer 1

$('.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();

All Read More / Read Less同时打开

1 个答案: