展开/折叠文本
下面的代码可以很好地处理一个显示/隐藏文本过程
<div class="reveal">Click Here to READ MORE...</div>
<div style="display:none;">
<div class="collapse" style="display:none;">Collapse Text</div>然而，如果这段代码被重复多次，折叠文本就会显示出来，而不会消失，而且实际上会与展开相冲突，从而显示更多的文本，而不是折叠。
在此http://jsfiddle.net/syEM3/4/中，单击任何单击此处阅读更多...请注意折叠文本如何显示在段落的底部，并且不会消失。单击折叠，它会显示更多文本。
我该如何防止这种情况，并让它正常工作呢？
回答 4
Stack Overflow用户
发布于 2013-03-13 06:49:28
这两个slideDown函数调用并不特定于您当前正在执行的.reveal和/或.collapse。即
$(".collapse").slideDown(100);将在页面上找到类为.collapse的所有元素，并向下滑动它们。不管你刚才点击的是什么元素。
我会将slideDown调用更改为与您刚才单击的元素相关，即如下所示
$('.reveal').click(function() {
$(this).slideUp(100);
$(this).next().slideToggle();
$(this).next().next(".collapse").slideToggle(100);
});Stack Overflow用户
发布于 2013-03-13 06:48:45
在代码中
$('.reveal').click(function() {
$(this).slideUp(100);
$(this).next().slideToggle();
$(".collapse").slideDown(100);
});
$('.collapse').click(function() {
$(this).slideUp(100);
$(this).prev().slideToggle();
$(".reveal").slideDown(100);
});这两行并没有执行您想要的操作，因为它们作用于指定类的所有元素
$(".reveal").slideDown(100);
$(".collapse").slideDown(100);Stack Overflow用户
发布于 2013-03-13 06:59:13
当您执行$(".collapse").slideDown(100);时，jQuery将在包含.collapse类的所有内容上运行slideDown，而不仅仅是与您当前的this相关的内容。要解决此问题，请参考$(this)的基于其位置的折叠。
这样做，使用像$(this).siblings(".collapse").slideDown(100);这样的东西
请注意，只有在将每个文本块包含在其自己的div中时，此特定选择器才会起作用。每个文本元素都在自己的div中，就像现在一样，使用collapse类选择$(this)的所有同级元素的.siblings(".collapse")仍然会选择这两个collapse元素。
https://stackoverflow.com/questions/15373633
复制相似问题
腾讯云开发者
