隱藏並顯示具有無序列表的div

Question

單擊上面的標簽時，我嘗試隱藏並顯示其中具有無序列表的div（過濾器面板-內容）。

#LABEL/DIV WHICH CAN BE CLICKED AND THE .click() SHOULD FIRE
<div class="filter-panel--flyout">
   <div id="label-it" class="label-it"><label class="filter-panel--title">
      <h3 class="rums">Ports</h3><div id="klapp" class="klapp"></div>
   </label></div>

#DIV WHICH SHOULD show AND hide WHEN LABEL IS CLICKED
<div class="filter-panel--content">
   <ul class="filter-panel--option-list">
      <li class="filter-panel--option">
      <div class="option--container">
         <span class="filter-panel--checkbox">
         <input type="checkbox" id="__f__575" name="__f__575" value="575">
         </span>
      <label class="filter-panel--label" for="__f__575">8</label>
      </div>
      </li>
   </ul>
</div></div>

#LABEL/DIV WHICH CAN BE CLICKED AND THE .click() SHOULD FIRE
<div class="filter-panel--flyout">
   <div id="label-it" class="label-it"><label class="filter-panel--title">
      <h3 class="rums">Ports</h3><div id="klapp" class="klapp"></div>
   </label></div>

#DIV WHICH SHOULD show AND hide WHEN LABEL IS CLICKED
<div class="filter-panel--content">
   <ul class="filter-panel--option-list">
      <li class="filter-panel--option">
      <div class="option--container">
         <span class="filter-panel--checkbox">
         <input type="checkbox" id="__f__576" name="__f__576" value="576">
         </span>
      <label class="filter-panel--label" for="__f__576">9</label>
      </div>
      </li>
   </ul>
</div>

#LABEL/DIV WHICH CAN BE CLICKED AND THE .click() SHOULD FIRE
<div class="filter-panel--flyout">
   <div id="label-it" class="label-it"><label class="filter-panel--title">
      <h3 class="rums">Ports</h3><div id="klapp" class="klapp"></div>
   </label></div>

#DIV WHICH SHOULD show AND hide WHEN LABEL IS CLICKED
<div class="filter-panel--content">
   <ul class="filter-panel--option-list">
      <li class="filter-panel--option">
      <div class="option--container">
         <span class="filter-panel--checkbox">
         <input type="checkbox" id="__f__577" name="__f__577" value="577">
         </span>
      <label class="filter-panel--label" for="__f__577">10</label>
      </div>
      </li>
   </ul>
</div>

這是我的click（）函數，該函數切換類（更改backgroundimage），此外，我想隱藏並顯示單擊的濾鏡面板內容：

$('.label-it').click(function() {
  $(this).find(".filter-panel--title div").toggleClass('klapp klappe');
  //hide and show filter-panel--content
  //tried something like this but it doesn't worked: 
  //$(this).find(".filter-panel--content div").hide();
});

但是，它只應關閉單擊的標簽filter-panel（內容），而不是關閉每個類別。 有人可以幫忙嗎？ 謝謝！

-編輯：

我還有一個問題，切換功能可以正常使用$(this).closest(".filter-panel--flyout").find(".filter-panel--content div")但是當我提交輸入時，顯示：none類將被刷新，它是display：block ..我如何提交已切換的.filter-panel--content使其保持切換狀態？

Answer 1

您不能使用$(this).find(".filter-panel--content div")因為filter-panel--content不是label-it的子label-it 。

因此，為了使其正常工作，您必須像$(this).closest(".filter-panel--flyout").find(".filter-panel--content div") .closest()那樣使用.closest() $(this).closest(".filter-panel--flyout").find(".filter-panel--content div")

演示版

 $('.label-it').click(function() { $(this).find(".filter-panel--title div").toggleClass('klapp klappe'); $(this).closest(".filter-panel--flyout").find(".filter-panel--content").toggle(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="filter-panel--flyout"> <div id="label-it" class="label-it"><label class="filter-panel--title"> <h3 class="rums">Ports</h3><div id="klapp" class="klapp"></div> </label> </div> #DIV WHICH SHOULD show AND hide WHEN LABEL IS CLICKED <div class="filter-panel--content"> <ul class="filter-panel--option-list"> <li class="filter-panel--option"> <div class="option--container"> <span class="filter-panel--checkbox"> <input type="checkbox" id="__f__575" name="__f__575" value="575"> </span> <label class="filter-panel--label" for="__f__575">8</label> </div> </li> </ul> </div> </div> #LABEL/DIV WHICH CAN BE CLICKED AND THE .click() SHOULD FIRE <div class="filter-panel--flyout"> <div id="label-it" class="label-it"><label class="filter-panel--title"> <h3 class="rums">Ports</h3><div id="klapp" class="klapp"></div> </label> </div> #DIV WHICH SHOULD show AND hide WHEN LABEL IS CLICKED <div class="filter-panel--content"> <ul class="filter-panel--option-list"> <li class="filter-panel--option"> <div class="option--container"> <span class="filter-panel--checkbox"> <input type="checkbox" id="__f__576" name="__f__576" value="576"> </span> <label class="filter-panel--label" for="__f__576">9</label> </div> </li> </ul> </div> </div> #LABEL/DIV WHICH CAN BE CLICKED AND THE .click() SHOULD FIRE <div class="filter-panel--flyout"> <div id="label-it" class="label-it"><label class="filter-panel--title"> <h3 class="rums">Ports</h3><div id="klapp" class="klapp"></div> </label></div> #DIV WHICH SHOULD show AND hide WHEN LABEL IS CLICKED <div class="filter-panel--content"> <ul class="filter-panel--option-list"> <li class="filter-panel--option"> <div class="option--container"> <span class="filter-panel--checkbox"> <input type="checkbox" id="__f__577" name="__f__577" value="577"> </span> <label class="filter-panel--label" for="__f__577">10</label> </div> </li> </ul> </div> </div>