Как сделать выпадающее меню при клике на кнопку?

Question

Как сделать кнопку, при клике на которую выпадет из нее меню с другими пунктами (ссылками)?

Answer 1

Вероятно вы спрашиваете про аккордеон (accordion, aka collapsible).

Я уже отвечал на вопросы о том как его можно сделать здесь:

Открыть закрыть секцию по клику, при этом закрыть другие если они открыты

Как называется такой выпадающий текст?

Пара адаптированных примеров:

ОБЫЧНОЕ ОТКРЫТИЕ

const handleClick = event => {
  const divs = document.querySelectorAll("div")
  const target = event.target.nextElementSibling
  target.classList.toggle("hide")
}

document.querySelectorAll("button").forEach(item => {
  item.addEventListener("click", handleClick)
})

a {
  display: block;
  margin: 10px 0;
}

button {
  display: block;
}

.hide {
  display: none;
}

<button>Кнопка 1</button>
<div class="hide">
  <strong>Блок 1</strong>
  <a>Ссылка 1</a>
  <a>Ссылка 2</a>
  <a>Ссылка 3</a>
</div>
<button>Кнопка 2</button>
<div class="hide">
  <strong>Блок 2</strong>
  <a>Ссылка 1</a>
  <a>Ссылка 2</a>
</div>
<button>Кнопка 3</button>
<div class="hide">
  <strong>Блок 3</strong>
  <a>Ссылка 1</a>
</div>

ТОЛЬКО ОДНА АКТИВНАЯ СЕКЦИЯ

const handleClick = event => {
  const divs = document.querySelectorAll("div")
  const target = event.target.nextElementSibling
  target.classList.toggle("hide")

  divs.forEach(item => {
    if (item !== target) {
      item.classList.add("hide")
    }
  })
}

document.querySelectorAll("button").forEach(item => {
  item.addEventListener("click", handleClick)
})

a {
  display: block;
  margin: 10px 0;
}

button {
  display: block;
}

.hide {
  display: none;
}

<button>Кнопка 1</button>
<div class="hide">
  <strong>Блок 1</strong>
  <a>Ссылка 1</a>
  <a>Ссылка 2</a>
  <a>Ссылка 3</a>
</div>
<button>Кнопка 2</button>
<div class="hide">
  <strong>Блок 2</strong>
  <a>Ссылка 1</a>
  <a>Ссылка 2</a>
</div>
<button>Кнопка 3</button>
<div class="hide">
  <strong>Блок 3</strong>
  <a>Ссылка 1</a>
</div>

БЛОГ НА HUSL

Как сделать выпадающее меню при клике на кнопку?

Ответы (1 шт):