0

我正在为菜单项创建滑出面板，因此当单击一个按钮时，面板会滑出。我需要的是一种在单击另一个按钮打开另一个面板时关闭打开的面板的方法。这就是我所拥有的。

<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>
4

2 回答 2

2

对我来说，这使得将每个面板/按钮包装在容器 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 个面板，它可能不会表现得那么好

此代码尚未经过测试

于 2012-06-10T22:46:22.593 回答
1

也许这会有所帮助：http ://api.jquery.com/toggle-event/ ，你必须处理一些功能，以防你点击另一个按钮打开另一个面板

最好的

于 2012-06-10T22:50:12.140 回答