0

Есть контейнер со списком, который раскрывается при добавлении класс active Как сделать, чтобы при клике на btn класс active убирался в контейнере nav?

//Добавляется класс к nav__dropdown
var openlist = 'active';

$('.dropbtn').on('click', function() {
    if ($(this).parent().hasClass(openlist)) {
        $('.nav__dropdown').removeClass(openlist);
    } else {
        $('.nav__dropdown').removeClass(openlist);
        $(this).parent().addClass(openlist);
    }
});
.btn {
  background: green;
  color: #fff;
  width: 280px;
  text-align: center;
  padding: 12px;
}

.nav {
  background: #D0D0D0;
  width: 320px;
  padding: 12px;
  margin-top: 24px;
}

.nav__dropdown-list {
  display: none;
}

.nav__item {
  background: #000;
  width: 300px;
  text-align: center;
  color: white;
  display: block;
  padding: 8px;
}

.nav__dropdown.active .nav__dropdown-list {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn">удалить active в блоке nav</div>
<nav class="nav">
  <div class="nav__dropdown active">
    <span class="nav__item dropbtn">для гостей</span>
    <ul class="nav__dropdown-list">
      <li class="nav__dropdown-item"><a href="">Меню</a></li>
    </ul>
  </div>
  <div class="nav__dropdown">
    <span class="nav__item dropbtn">для бизнеса</span>
    <ul class="nav__dropdown-list">
      <li class="nav__dropdown-item"><a href="">Меню</a></li>
    </ul>
  </div>
</nav>

2 ответа 2

1

Получилось вот таким способом

$('. btn').click(function() {
    $('.nav__dropdown').removeClass('active');
});
0

Точно так же, как это Вы (или не Вы) уже сделали с .dropbtn. Нужно добавить кнопке class или id для идентификации, повесить слушатель на click и при нажатии удалять все .active в nav.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.