使用jQuery打开和关闭切换元素点击最近的div
问题描述:
我正在工作职位页面上,该页面将显示工作描述的简短预览以及切换,点击切换时,该切换将滑动以显示更多发布的详细信息。使用jQuery打开和关闭切换元素点击最近的div
的标记看起来是这样的:
<div>
<div class="career-excerpt">
<p>Preview text goes here</p>
</div>
<div class="career-details">
<p>Longer explanation/detail text goes here</p>
</div>
<p><a class="toggle" href="#">Show Details</a></p>
</div>
,这里是jQuery的我使用切换开放细节部分:
$(".career-details").hide();
$(".toggle").click(function() {
$(".career-details").toggle("fast",function() {
$('.toggle').text(
$(this).is(':visible') ? "Hide Details" : "Show Details"
);
});
});
这工作可切换的细节公开,更改文本从“显示细节”到“隐藏细节”。但是,每个页面上都会有多个帖子,通过此代码,单击一次切换会导致所有描述打开。
我想切换到只打开切换的同一父div的“职业细节”div。
我试着改变:
$(".career-details").toggle("fast",function() {
到:
$(this).closest(".career-details").toggle("fast",function() {
但在这之后似乎是切换不会在所有的工作。任何想法将不胜感激,谢谢!
答
.toggle
不是.career-details
所以你压根行不通的孩子,试试这个:
$(this).closest("div").find(".career-details").toggle("fast",function() {....});
答
$(this).parent().find('.career-details').toggle('fast', function(){
答
你几乎没有,唯一的问题是你如何试图找到.career-details
元素。
这将是:
$(this).parent().siblings(".career-details").toggle("fast",function() {
答
$(".toggle").click(function() {
var that = $(this); //that == clicked Element
that.parent().prev().toggle("fast", function() {
that.text($(this).is(':visible') ? "Hide Details" : "Show Details");
});
});
如果你有.toggle
的父p
和你拨动div
之间更多的元素,你可以使用更坚固选择器(一些性能损失但工作原理相同):
var that = $(this);
that.parent().prevAll('.career-details').first().toggle("fast", function() {
太棒了,这个工作很有意义。谢谢你的回答和解释! – 2012-08-13 17:19:12