切换功能无法正常工作
问题描述:
我有一个简单的切换功能来显示和隐藏内容。它通过点击H2触发,并添加了“全部显示”/“全部隐藏”功能。切换功能无法正常工作
我遇到的问题是,当您展开几个内容区域时,然后单击“显示所有”它隐藏打开的并显示隐藏的内容,而不是仅显示隐藏的内容。我知道它是由“.toggle”函数触发和切换开放函数而导致的。从理论上讲,我怀疑我必须为扩展后的类添加一个类,然后运行检查以查看是否有任何内容已打开并且不会切换,只会展开隐藏内容。要关闭“全部关闭”按钮,我必须做相反的事情?
我该如何补救? example is here
答
因为toggle
只会切换元件的状态(显示/隐藏)。在这种情况下不使用slideToggle
,而是使用slideUp/slideDown
有条件试试这个。
$(".toggleAll").click(function() {
if($(this).text() == 'Show All'){
$(".faq p").slideDown("slow");
$(this).text('Hide All');
$(".faq h2").addClass('active');
}
else{
$(".faq p").slideUp("slow");
$(this).text('Show All');
$(".faq h2").removeClass('active');
}
});
+0
非常感谢演示和知识。 – 2012-01-31 21:56:59
答
简单:不要使用“toggle()
”作为显示全部按钮,而是使用“show()
”。同上,用于隐藏一切,用“hide()"
。
仅使用toggle()
为单次点击
@Nanne和ShankarSangoli真棒!日x为了矫正我。希望我可以将两者都标记为正确的答案,只要先与谁回答。谢谢你们,非常感谢。在香卡的真棒男人的ESP演示。 – 2012-01-31 21:56:41