Как переключить элемент li, нажав первый элемент li в списке ul? - PullRequest
Новая
       23

Как переключить элемент li, нажав первый элемент li в списке ul?

1 голос
/ 04 октября 2019

Я пытаюсь переключить все 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>

Ответы [ 2 ]

0 голосов
/ 04 октября 2019 
$('.search__filters').on('click', function() {
  $(this).parent('li').siblings('li.hassubs-filter').slideToggle();
});

Признано, используйте приведенный выше код, чтобы показать / скрыть элементы списка при нажатии на метку привязки

0 голосов
/ 04 октября 2019

Ваш обход 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>
...