jQuery向下滑動面板打開/關閉

Question

我已經在我的網站上設置了3個向下滑動的面板功能，我的問題是您可以同時單擊並展開所有3個，並且它們重疊且看起來很雜亂，有沒有一種方法可以讓我一次打開，另一次打開時其他人自動關閉。

jQuery的

$(document).ready(function() { 

$(".topLink01").click(function() { 
$("#panel1").slideToggle("slow"); 
$(this).toggleClass("active"); 
return false; 
}); 


$(".topLink02").click(function() { 
$("#panel2").slideToggle("slow"); 
$(this).toggleClass("active"); 
return false; 
}); 


$(".topLink03").click(function() { 
$("#panel3").slideToggle("slow"); 
$(this).toggleClass("active"); 
return false; 
}); 

}); 

HTML

<a href="#" class="topLink topLink01">BUTTON<</a> 

<a href="#" class="topLink topLink02">BUTTON</a> 

<a href="#" class="topLink topLink03">BUTTON</a> 

<div id="panel1"> 
CONTENT 
</div> 

<div id="panel2"> 
CONTENT 
</div> 

<div id="panel3"> 
CONTENT> 
</div> 

CSS

#panel1{ position:absolute; background: #0e5faf; display: none; right:0; top:36px; width: 250px; z-index:999; line-height: 18px; padding:15px; } 

#panel2{ position:absolute; background: #0e5faf; display: none; right:0; top:36px; width: 250px; z-index:999; line-height: 18px; padding:15px; } 

#panel3{ position:absolute; background: #0e5faf; display: none; right:0; top:36px; width: 250px; z-index:999; line-height: 18px; padding:15px; } 

感謝

Answer 1

我知道你已經接受一個答案但你的做法是不是很有效。我會在這裏留下，也許它會幫助你。

CSS：

.toggles{display:none} 

HTML：

<a href="" class="topLink" data-target="t1">BUTTON</a> 
    <a href="" class="topLink" data-target='t2'>BUTTON</a> 
    <a href="" class="topLink" data-target='t3'>BUTTON</a> 
    <div class="toggles" data-target='t1'>CONTENT1</div> 
    <div class="toggles" data-target='t2'>CONTENT2</div> 
    <div class="toggles" data-target='t3'>CONTENT3</div> 

JS：

$(document).ready(function() { 
     $(".topLink").on('click', function (event){ 
      event.preventDefault(); 
      var e = $(this); //writing $(this) every time is bad 
       t = $("div[data-target='"+e.attr('data-target')+"']"); //same as above 

      if(e.hasClass('active')){ 
       //remove from this 
       e.removeClass("active"); 
       //close box  
       t.slideUp("slow"); 
      } else { //toggle menu when clicking on some other link 
       //remove from everywhere 
       $(".topLink").removeClass('active'); 
       //slide every box up 
       $('.toggles').slideUp("slow"); 
       //add to this only 
       e.addClass('active'); 
       //slide associated box down 
       t.slideDown("slow"); 
      } 
     });  
    }); 

這裏有一個fiddle以防萬一你看過去。當然這個代碼也可以改進。

Answer 2

這個工作對我來說：

<script> 
$(document).ready(function() { 
var opened = $(".panel"); 
$(".topLink01").click(function() { 
opened.slideToggle("slow"); 
$(".active").toggleClass("active"); 
$("#panel1").slideToggle("slow"); 
opened = $("#panel1"); 
$(this).toggleClass("active"); 
return false; 
}); 


$(".topLink02").click(function() { 
opened.slideToggle("slow"); 
$(".active").toggleClass("active"); 
$("#panel2").slideToggle("slow"); 
opened = $("#panel2"); 
$(this).toggleClass("active"); 
return false; 
}); 


$(".topLink03").click(function() { 
opened.slideToggle("slow"); 
$(".active").toggleClass("active"); 
$("#panel3").slideToggle("slow"); 
opened = $("#panel3"); 
$(this).toggleClass("active"); 
return false; 
}); 

}); 
</script> 
<a href="#" class="topLink topLink01">BUTTON<</a> 

<a href="#" class="topLink topLink02">BUTTON</a> 

<a href="#" class="topLink topLink03">BUTTON</a> 

<div id="panel1" class="panel"> 
CONTENT 
</div> 

<div id="panel2" class="panel"> 
CONTENT 
</div> 

<div id="panel3" class="panel"> 
CONTENT> 
</div>