0

メニュー項目のスライド アウト パネルを作成しているので、1 つのボタンをクリックするとパネルがスライドします。必要なのは、別のボタンをクリックして別のパネルを開くときに、開いているパネルを閉じる方法です。これが私が持っているものです。

<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");
  }
});

close and findを使用すると、JavaScriptを壊さずにマークアップを後で変更できますが、数千のパネルがある場合は、パフォーマンスが低下する可能性があります。

このコードはテストされていません

于 2012-06-10T22:46:22.593 に答える
1

多分これが役立つでしょう：http://api.jquery.com/toggle-event/、別のボタンをクリックして別のパネルを開く場合に備えて、いくつかの機能を処理する必要があります

一番

于 2012-06-10T22:50:12.140 に答える