關閉隱藏div onclick並切換另一個div

Question

我正在使用下面的代碼來切換隱藏的div。

function toggle_visibility(id) { 
     var e = document.getElementById(id); 

      $(e).slideToggle("slow"); 




    } 

<div id="toplinks"> 
<a href="../index.php">Home</a> | <a href="#" onclick="toggle_visibility('aboutus');">About Us</a> | <a href="#" onclick="toggle_visibility('contact');" >Contact us</a> | <a href="#" onclick="toggle_visibility('social');">Social Media</a> | <a href="#" onclick="toggle_visibility('contact');">Send your demo</a> | <a href="#" onclick="toggle_visibility('presskit');">Press Kit</a> 
</div><!--toplinks end --> 

問題是，如果我點擊它們全部，那麼將全部同時出現在頁面中。 有沒有辦法自動關閉一個（如果它打開），以便只有一個div出現，如果點擊？

Answer 1

您可以將您的prev id保存在變量中，如果不爲null，請再次切換。例如：

var prevId; 

function toggle_visibility(id) { 
    if(prevId && id !== prevId){ 
     $("#"+prevId).slideToggle("slow"); 
    } 
    var e = document.getElementById(id); 

     $(e).slideToggle("slow"); 
    prevId = id; 

} 

Answer 2

是的。

首先，添加panel css類到每個的面板，假設出現和消失與導航項點擊。

其次，添加CSS類每個<a>標籤與它的名字（家庭，公司簡介等）

，然後用這個jQuery代碼：

$(function(){ 
    $('#toplinks a').click(function(){ 
     $('.panel').hide(); // hide all panels 
     if ($(this).hasClass('home')) { 
      $('.panel.home').fadeIn(); // show homepage panel 
     } 
     else if ($(this).hasClass('aboutus')) { 
      $('.panel.aboutus').fadeIn(); // show about us panel 
     } 
     // more items ... 
    }); 
}); 

希望幫助。