水平多个Div-滑动打开/关闭Div

Question

我的目标是提供一个功能，当用户单击“标签-过滤器1”时，div中的内容-“ Filter_1_Content”出现，而其他两个div同时滑下。但是，当用户单击“标签-过滤器2”时，“过滤器1”的内容应消失，而“过滤器3”同时向下滑动时应显示“过滤器2”。过滤器3等也是如此。请注意，在页面首次加载时，仅标签会出现。

这是我当前拥有的jQuery代码，它适用于过滤器1。但是，过滤器2和过滤器3不会移动。有什么想法吗？

<div id="Filter_1">
 <label id="Filter1_Label">Filter 1</label>
  <div id="Filter_1_Content" class"Filters">
   ...content
  </div>
</div>

<div id="Filter_2">
 <label id="Filter2_Label">Filter 2</label>
  <div id="Filter_2_Content" class"Filters">
   ...content
  </div>
</div>

<div id="Filter_3">
 <label id="Filter2_Label">Filter 3</label>
  <div id="Filter_3_Content" class"Filters">
   ...content
  </div>
</div>

function SlideDiv() {
 var scopeFilters = $("#Filter1_Label").next(".Filters");
 if (scopeFilters.is(":hidden")) {
     scopeFilters.slideDown('fast');
 } else {
     scopeFilters.slideUp('fast');
 }
};

Answer 1

要最有效地实现所需的功能，可以使用公共类和DOM遍历将公共逻辑应用于重复的HTML结构。试试这个：

var $content = $('.filter-container > div');

$('.filter-container label').click(function() {
  var $target = $(this).next('div');
  $content.not($target).slideUp('fast');
  $target.slideToggle('fast');
});

.filter-container > div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter-container">
  <label>Filter 1</label>
  <div class="filters">
    Content...
  </div>
</div>
<div class="filter-container">
  <label>Filter 2</label>
  <div class="filters">
    Content...
  </div>
</div>
<div class="filter-container">
  <label>Filter 3</label>
  <div class="filters">
    Content...
  </div>
</div>

从上面可以看到，使用增量id属性会使您自己工作（不必要）更多，并且会导致更复杂的JS代码，但绝对没有好处。

Answer 2

您可以尝试下面的逻辑，在该逻辑中可以找到父div，然后可以找到其他过滤器div。 向上滑动其他过滤器div并向上滑动单击的过滤器div。

$(function(){
  $("div[id^='Filter_'] label").on("click", function(){
      var $parent = $(this).closest("div");
     $parent.siblings().find("div.Filters").slideUp("fast");
     $(this).next("div.Filters").slideToggle("fast");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="Filter_1">
 <label>Filter 1</label>
  <div id="Filter_1_Content" class="Filters">
   ...content
  </div>
</div>

<div id="Filter_2">
 <label>Filter 2</label>
  <div id="Filter_2_Content" class="Filters">
   ...content
  </div>
</div>

<div id="Filter_3">
 <label>Filter 3</label>
  <div id="Filter_3_Content" class="Filters">
   ...content
  </div>
</div>