1

Есть вот такой блок:

введите сюда описание изображения

код html (стили прикреплять не буду, слишком много кода):

<div>
    <div>SERVER MANAGEMENT</div>
</div>
<ul>
    <a>Приветствия</a>
    <a>Модератор</a>
    <a>Реакции с ролями</a>
</ul>

Нужно сделать так, чтобы при нажатии на SERVER MANAGEMENT список ul сворачивался, а при повторном нажатии разворачивался.

Как это можно реализовать?

4
  • Реализовать можно так. Создаёте развёрнутый блок, задаёте ему display:none; Далее черёд js обрабатывает клик по нужному элементу и добавляете класс ddisplay:Block.
    – Max Watson
    8 авг 2021 в 13:35
  • А как поймать клик по div блоку?
    – zrx
    8 авг 2021 в 13:37
  • Лично я в таких случаях использую jquery.
    – Max Watson
    8 авг 2021 в 13:42
  • CSS-way: .outer-div:focus ~ ul { <стили_чтобы_сворачивался> }, при наличии tabindex у внешнего div-элемента. JS-way: anyDivElem.addEventListener('click', () => ulElem.classList.toggle('chtoby-svorachivalsya'));
    – yar85
    8 авг 2021 в 13:44

1 ответ 1

4

$('.menu-header').on(`click`, function() {
  $(this).next().stop(true).slideToggle();
});
ul {
  display: block;
  background-color: gray;
}

ul a {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-header">
  <div>SERVER MANAGEMENT</div>
</div>
<ul>
  <a>Приветствия</a>
  <a>Модератор</a>
  <a>Реакции с ролями</a>
</ul>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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