时间戳

首页 > 解决方案 > 如何通过单击 ul 列表中的第一个 li 元素来切换 li 元素？

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

问题描述

我正在尝试切换所有点击时的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>

标签： jqueryhtml-liststoggle

解决方案

您的 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>

推荐阅读