显示隐藏最接近元素点击
http://jsfiddle.net/KevinOrin/xycCx/1/显示隐藏最接近元素点击
jQuery('.happening-main-text .readmore').click(function() {
jQuery('.divmore').toggle('slow');
return false;
});
我试图让每一个环节都显示/隐藏只有一个点击。我如何修改JS来这么做。我试过('.happening-main-text').closest('divmore')
,那也没用。
<div class="happening-main-text">
<p>part of text goes here part of text <a href="#" class="readmore">show/hide</a>
</p>
<div class="divmore">
<p>more test from hidden1</p>
</div>
</div>
<div class="happening-main-text">
<p>part of text goes here part of text <a href="#" class="readmore">show/hide</a>
</p>
<div class="divmore">
<p>more test from hidden</p>
</div>
</div>
<div class="happening-main-text">
<p>part of text goes here part of text <a href="#" class="readmore">show/hide</a>
</p>
<div class="divmore">
<p>more test from hidden2</p>
</div>
</div>
如果您持续HTML当前的格式下面的代码应该工作
jQuery('.happening-main-text .readmore').click(function() {
jQuery(this).parent().next().toggle('slow');
return false;
});
多数民众赞成它,谢谢! – KevinOrin 2013-05-11 02:07:26
通过查看你的小提琴的DOM,这可能是解决这个问题的方式:
jQuery('.happening-main-text .readmore').click(function() {
jQuery(this).parent().next().toggle('slow');
return false;
}
查看文档中的$.next和$.parent。此外,您可能会注意到动画“跳动”,这是因为p
(related SO question)上的边距。删除边距将解决此问题。例如:
p { margin: 0; }
其实这比我的要好:)。 – sixFingers 2013-05-11 01:16:43
凯文,尝试走这条路:
$('.happening-main-text').each(function() {
$divmore = $(this).find(".divmore");
$readmore = $(this).find(".readmore");
$readmore.bind("click", {target: $divmore}, function(e) {
e.data.target.toggle();
});
});
你需要不同的目标传递给每点击回调,因为你的HTML的结构。重构一下DOM可以让你使用$()。兄弟或其他更简单的解决方案。 http://jsfiddle.net/xycCx/6/
该解决方案如下(http://jsfiddle.net/4nJWf/):
注: 无论如何,你可以在这里你捣鼓的工作版本看看bug修复在原始的HTML
HTML
<div class="happening-main-text">
<p>part of text goes here part of text <a href="#" class="readmore">show/hide</a>
</p>
<div class="divmore">
<p>more test from hidden1</p>
</div>
</div>
<div class="happening-main-text">
<p>part of text goes here part of text <a href="#" class="readmore">show/hide</a>
</p>
<div class="divmore")">
<p>more test from hidden</p>
</div>
</div>
<div class="happening-main-text">
<p>part of text goes here part of text <a href="#" class="readmore">show/hide</a>
</p>
<div class="divmore">
<p>more test from hidden2</p>
</div>
</div>
jQuery的
jQuery('.happening-main-text .readmore').click(function() {
$(this).parents('.happening-main-text').children('.divmore').toggle('slow');
return false;
});
我知道这已经回答了,但它看起来像在课堂上divmore
隐藏文字在溶液中没有显示,而是它隐藏了happening-main-text
类的其余部分。
它应该只切换.divmore
类直接到点击<a>
像下面这样:
$(document).ready(function(){
$(".readmore").click(function(){
$(this).parent("p").siblings("div").toggle("slow");
});
});
这里是我的fiddle
最近如何?最近的兄弟姐妹?后裔?祖先?谁能告诉你如何选择我们看不到的DOM元素? – 2013-05-11 01:01:25