如何通过单击ul列表中的第一个li元素来切换li元素？

Question

我正在尝试切换所有单击时具有li的.hassubs-filter元素。由于我在页面上多次重复了这些列表，因此我不想在其中添加任何id。

我尝试使用parent()，find()和slideToggle()进行此操作，但是它不会隐藏/显示。你能帮我吗？

$('.search__filters').on('click', function() {
  $(this).parent('li').find('ul').slideToggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-filter">
  <ul class="mainnav-filter">
    <li class="headtext-filter">
      <a href="#" class="search__filters">
        All Items
        <div class="chevron-down"></div>  
      </a>
    </li>
    <li class="hassubs-filter">Some Text </li>
    <li class="hassubs-filter">Some Text </li>
    <li class="hassubs-filter">Some Text </li>
    <li class="hassubs-filter">Some Text </li>
  </ul>
</div>

Answer 1

您的DOM遍历以查找与单击的.hassubs-filter相关的a元素并不完全正确。您可以使用closest()获取父级li，然后使用`siblings（），如下所示：

$('.search__filters').on('click', function() {
  $(this).closest('li').siblings('.hassubs-filter').slideToggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-filter">
  <ul class="mainnav-filter">
    <li class="headtext-filter">
      <a href="#" class="search__filters">
        All Items
        <div class="chevron-down"></div>  
      </a>
    </li>
    <li class="hassubs-filter">Some Text </li>
    <li class="hassubs-filter">Some Text </li>
    <li class="hassubs-filter">Some Text </li>
    <li class="hassubs-filter">Some Text </li>
  </ul>
</div><div class="main-filter">
  <ul class="mainnav-filter">
    <li class="headtext-filter">
      <a href="#" class="search__filters">
        All Items
        <div class="chevron-down"></div>  
      </a>
    </li>
    <li class="hassubs-filter">Some Text </li>
    <li class="hassubs-filter">Some Text </li>
    <li class="hassubs-filter">Some Text </li>
    <li class="hassubs-filter">Some Text </li>
  </ul>
</div><div class="main-filter">
  <ul class="mainnav-filter">
    <li class="headtext-filter">
      <a href="#" class="search__filters">
        All Items
        <div class="chevron-down"></div>  
      </a>
    </li>
    <li class="hassubs-filter">Some Text </li>
    <li class="hassubs-filter">Some Text </li>
    <li class="hassubs-filter">Some Text </li>
    <li class="hassubs-filter">Some Text </li>
  </ul>
</div>