multiple slideDowns切换两个元素

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", $(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

运行上面的代码

Answer 2

(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'的所有元素。