jQuery下拉麪板 - 一次只打開一個面板？

Question

關於下拉麪板的問題。我在這裏有一個jsfiddle http://jsfiddle.net/jmccommas/nJmNy/1/，我遇到的問題是我只想要一次打開一個面板的功能。因此，當用戶點擊不同的選項卡按鈕時，打開的面板將會關閉，同時打開新的面板。任何幫助，將不勝感激。

這裏是JS：

$(function() { 

    $('#dropDown a').each(function() { 
     $('.panels').hide(); 
     var $this = $(this); 
     var panels = $this.attr('href'); 

     $this.click(function() { 
      $('.arrow').hide().fadeIn('slow'); 
      $('#dropDown a.active').removeClass('active'); 

      if ($('.panels').is(':visible')) { 
       $('.panels').slideUp('slow'); 


      } else { 
       $('.arrow').hide().fadeIn('slow'); 
       $(panels).slideDown('slow'); 
       $this.addClass('active').blur(); 

      }; // end else 


     }); // end click 

    }); // end each 

    $('.close-button a, .arrow a').click(function (evt) { // This is the close button 
     var panels = $('.panels'); 
     $(panels).slideUp(600); 
     evt.preventDefault(); 
    }); // end close button 


}); // end ready 

HTML：

<div id="demoPanels"> 
    <ul id="dropDown"> 
     <li><a href="#panel1">Button 1</a></li> 
     <li><a href="#panel2">Button 2</a></li> 
     <li><a href="#panel3">Button 3</a></li> 
     <li><a href="#panel4">Button 4</a></li> 
    </ul> 
    <div class="panelContainer"> 
    <div id="panel1" class="panels"> 
     <div class="arrow" align="center"><a href="#"><img src="arrow.jpg" alt=""></a></div> 
     <h2>panel 1</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quo, maiores, quam praesentium obcaecati voluptate harum incidunt vel eius odio facilis atque impedit aperiam modi voluptas enim ipsa dolorem consequatur!</p> 
     <div class="close-button"> 
      <span><a href="#">X</a></span> 
     </div> 
    </div> 
    <div id="panel2" class="panels"> 
     <div class="arrow" align="center"><a href="#"><img src="arrow.jpg" alt=""></a> </div> 
     <h2>panel 2</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quo, maiores, quam praesentium obcaecati voluptate harum incidunt vel eius odio facilis atque impedit aperiam modi voluptas enim ipsa dolorem consequatur!</p> 
     <div class="close-button"> 
      <span><a href="#">X</a></span> 
     </div> 
    </div> 
    <div id="panel3" class="panels"> 
     <div class="arrow" align="center"><a href="#"><img src="arrow.jpg" alt=""></a> </div> 
     <h2>panel 3</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quo, maiores, quam praesentium obcaecati voluptate harum incidunt vel eius odio facilis atque impedit aperiam modi voluptas enim ipsa dolorem consequatur!</p> 
     <div class="close-button"> 
      <span><a href="#">X</a></span> 
     </div> 
    </div> 
    <div id="panel4" class="panels"> 
     <div class="arrow" align="center"><a href="#"><img src="arrow.jpg" alt=""></a> </div> 
     <h2>panel 4</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quo, maiores, quam praesentium obcaecati voluptate harum incidunt vel eius odio facilis atque impedit aperiam modi voluptas enim ipsa dolorem consequatur!</p> 
     <div class="close-button"> 
      <span><a href="#">X</a></span> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

嘗試針對點擊的元素（demo）的兄弟姐妹：

$this.click(function() { 
    $(panels).slideToggle(600) 
     .siblings().slideUp(600); 
}); // end click