如何在另一个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/，你必须处理的情况下，你点击另一个按钮打开不同的面板

最佳