如何在另一個div被觸發時關閉切換div

Question

我爲菜單項創建滑出面板，因此當單擊一個按鈕時，面板會滑出。我需要的是當單擊另一個按鈕打開不同面板時使打開的面板關閉的方法。這是我的。

<script type="text/javascript"> 
    $(document).ready(function(){ 
$(".trigger").click(function(){ 
      $(this).prev('.panel').toggle("fast"); 
    $(this).toggleClass("active"); 
    return false; 
}); 
    }); 
</script> 
<div id="menu-filter"> 
<div class="panel"> 
<-----content A-----> 
</div> 
<a class="trigger" href="#">A</a> 

<div class="panel"> 
<-----content B-----> 
</div> 
<a class="trigger" href="#">B</a> 
</div> 

Answer 1

對我來說這使事情變得更容易一些 使用最接近包裹在一個div容器

<div id="menu-filter"> 
    <div class="panel-container"> 
    <div class="panel"> 
     <-----content A-----> 
    </div> 
    <a class="trigger" href="#">A</a> 
    </div> 
    <div class="panel-container"> 
    <div class="panel"> 
     <-----content B-----> 
    </div> 
    <a class="trigger" href="#">B</a> 
    </div> 
</div> 

然後

$(".trigger").click(function(e) { 
    e.preventDefault(); 

    // clicked button 
    var $button = $(this); 
    // get ref to panel, go up to parent container and back down to find panel 
    var $panel = $(this).closest("panel-container").find("panel"); 

    if ($button.hasClass("active")) { 
    // we hide the open panel for this button 
    $panel.hide("fast"); 
    $button.removeClass("active"); 
    } else { 
    // hide any open panels 
    $('.panel').hide("fast"); 
    $('.trigger').removeClass("active"); 

    // show clicked 
    $panel.toggle("fast"); 
    $button.toggleClass("active"); 
    } 
}); 

每個面板/按鈕，找到可以允許標記變化後來沒有打破JavaScript，但是如果你有1000塊面板它可能表現不佳

這段代碼沒有經過測試

Answer 2

也許這將幫助：http://api.jquery.com/toggle-event/，你必須處理的情況下，你點擊另一個按鈕打開不同的面板

最佳