Question

我正试图找到一种方法来滑动div并将点击的链接文本更改为“少阅读”，但只有下面的div。

<h2>Hello World</h2>
<span class="trigger"><a href="javascript:;">Read more...</a>
<div class="toggle_container">Isn't it a sunny day!</div>

<h2>Hello Again!</h2>
<span class="trigger"><a href="javascript:;">Read more...</a>
<div class="toggle_container">Today isn't so sunny.</div>

这是我得到的最接近的，但是当点击任何锚点时，它会执行所有div。

  $(document).ready(function() { 
  $('.toggle_container').hide();

  $("span.trigger a").click(function() {
    $(".toggle_container").animate({ opacity: 1.0 },200).slideToggle(500, function() {
      $("span.trigger a").text($(this).is(':visible') ? 'Read less...' : 'Read more...');
    }); 
});

});

Answer 1

(document).ready(function() { 
    $('.toggle_container').hide();
    $("span.trigger a").click(function() {
       $(".toggle_container").animate({ opacity: 1.0 },200).slideToggle(500, function() {
                $(this).previous('.trigger:first').children('a:first').text($(this).is(':visible') ? 'Read less...' : 'Read more...');
        }); 
    });
});

这样的事情应该有用，我希望这会让你知道如何解决问题。尝试使用$（this）选择所需的.trigger。使用.trigger选择器将选择具有class ='trigger'的所有元素。

Answer 2

这应该有效：

$(document).ready(function() {
  $('.toggle_container').hide();

  $("span.trigger a").click(function() {
    $(".toggle_container", $(this).parent()).animate({ opacity: 1.0 },200).slideToggle(500, function() {
      $("a", $(this).parent()).text($(this).is(':visible') ? 'Read less...' : 'Read more...');
    });
  });
});

您需要传递$(this).parent()以将选择器限制为仅限于您点击的链接的父级。否则，它将包含所有匹配的元素。

你也错过了我在

下面添加的</span>

<h2>Hello World</h2>
<span class="trigger">
  <a href="javascript:;">Read more...</a>
  <div class="toggle_container">Isn't it a sunny day!</div>
</span>
<h2>Hello Again!</h2>
<span class="trigger">
   <a href="javascript:;">Read more...</a>
  <div class="toggle_container">Today isn't so sunny.</div>
</span>

您可以在JS Fiddle

上看到上面的代码

多个slideDowns切换两个元素

2 个答案: