Как скрыть элемент в зависимости от значения .dropdown-button__button?

151

20 января 2020, 14:30

Имеется следующий выпадающий список:

<div class="dropdown-button dropdown">
       <button class="dropdown-button__button button dropdown-toggle" type="button" id="dropbutton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">Москва</button>
                    <div id="city-dropdown" class="dropdown-button__wrap dropdown-menu dropdown-menu-right" aria-labelledby="dropbutton1">
                        <a class="dropdown-button__item dropdown-item" data-transport="" href="javascript:void(0)">Москва</a>
                        <a class="dropdown-button__item dropdown-item" data-transport="" href="javascript:void(0)">Калуга</a>
                    </div>
       </div>

Также имеется следующий js-код для скрытия #city-dropdown.dropdown-button__item в зависимости от значения .dropdown-button__button

$('.dropdown-button__button').click(function() {
        $('#city-dropdown .dropdown-button__item:contains('+$(this).text()+')').toggleClass('is-hidden');
    });

При попытке скрыть элемент код отрабатывает. Например, при выборе варианта "Калуга" элемент #city-dropdown.dropdown-button__item скрывается, но при попытке выбрать оставшийся вариант из списка скрывается и второй элемент, в итоге в выпадающем списке не остается элементов. Как исправить эту ошибку?

P.S. 'is-hidden' содержит в себе свойство display: none

Answer 1

$('.dropdown-button__button').click(function() {
  $('.dropdown-button__item.is-hidden').removeClass('is-hidden');
  $('.dropdown-button__item:contains(' + $(this).text() + ')').toggleClass('is-hidden');
});