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/，如果您点击其他按钮打开其他面板，则必须处理某些功能

最佳

如何在触发另一个div时关闭切换div

2 个答案: