水平多個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>