javascript - 使用无序列表隐藏和显示 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() 函数，它切换类(更改背景图像)，另外我想隐藏和显示点击的过滤器面板--内容:

$('.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--content，而不是它的每一类。有人可以帮忙吗？谢谢!

-- 编辑:

我还有一个问题，切换正常 $(this).closest(".filter-panel--flyout").find(".filter-panel--content div") 但是当我提交我的输入时，display:none 类将被刷新并且它是 display:block.. 我如何提交我切换的 .filter-panel--content 以便它保持切换？

Answer 1

你不能使用 $(this).find(".filter-panel--content div") 因为 filter-panel--content 不是label-it 的 child 。

因此，为了使其工作，您必须像 $(this).closest(".filter-panel--flyout") 那样使用 .closest()。 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>