2012-01-31 125 views
0

我有一个简单的切换功能来显示和隐藏内容。它通过点击H2触发,并添加了“全部显示”/“全部隐藏”功能。切换功能无法正常工作

我遇到的问题是,当您展开几个内容区域时,然后单击“显示所有”它隐藏打开的并显示隐藏的内容,而不是仅显示隐藏的内容。我知道它是由“.toggle”函数触发和切换开放函数而导致的。从理论上讲,我怀疑我必须为扩展后的类添加一个类,然后运行检查以查看是否有任何内容已打开并且不会切换,只会展开隐藏内容。要关闭“全部关闭”按钮,我必须做相反的事情?

我该如何补救? example is here

+0

@Nanne和ShankarSangoli真棒!日x为了矫正我。希望我可以将两者都标记为正确的答案,只要先与谁回答。谢谢你们,非常感谢。在香卡的真棒男人的ESP演示。 – 2012-01-31 21:56:41

回答

1

因为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'); 
    } 
}); 

Demo

+0

非常感谢演示和知识。 – 2012-01-31 21:56:59

2

简单:不要使用“toggle()”作为显示全部按钮,而是使用“show()”。同上,用于隐藏一切,用“hide()"

仅使用toggle()为单次点击