Как реализовать меню-дерево с помощью радиокнопок? HTML, JS

Question

Надо сделать только с помощью радиокнопок меню-дерево в HTML и JS, т.е. чтобы при нажатии кнопки открывалось еще меню с подпунктами

Answer 1

Пример простейшего варианта без JS. Если нужно чтобы раскрытие ветки меню не вызывало закрытие других веток, то можно заменить радиокнопки на чекбоксы. И, конечно, отображение самих радиокнопок можно выключить, оставив только лейблы.

:not(:checked) + label + .sub-items {
  /* скрываем блок подменю под невыбранными пунктами */
  display: none;
}

.sub-items {
  margin:0.2em 0 0.2em 2em;
}

label {
  display: inline-block;
  width: calc(100% - 2em);
}

<input type="radio" name="item" id="item-1"><label for="item-1">Пункт 1</label>
<div class="sub-items">
  <input type="radio" name="sub-item-1" id="sub-item-1-1"><label for="sub-item-1-1">Подпункт 1.1</label>
  <input type="radio" name="sub-item-1" id="sub-item-1-2"><label for="sub-item-1-2">Подпункт 1.2</label>
</div>

<input type="radio" name="item" id="item-2"><label for="item-2">Пункт 2</label>
<div class="sub-items">
  <input type="radio" name="sub-item-2" id="sub-item-2-1"><label for="sub-item-2-1">Подпункт 2.1</label>
  <input type="radio" name="sub-item-2" id="sub-item-2-2"><label for="sub-item-2-2">Подпункт 2.2</label>
</div>

<input type="radio" name="item" id="item-3"><label for="item-2">Пункт 3</label>
<div class="sub-items">
  <input type="radio" name="sub-item-3" id="sub-item-3-1"><label for="sub-item-3-1">Подпункт 3.1</label>
  <input type="radio" name="sub-item-3" id="sub-item-3-2"><label for="sub-item-3-2">Подпункт 3.2</label>
</div>

БЛОГ НА HUSL

Как реализовать меню-дерево с помощью радиокнопок? HTML, JS

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