список скрыть/показать

Question

как спрятанный блок, показывать при нажатии ? я использую правило свойства active для <a> , но оно показывает список, только при задерживании, а нужно, чтобы нажал появилось, нажал второй раз исчезло.

// использование js не подходит, ищу решение через css

.dropdown {
  visibility: hidden;
  display: none;
}

ul li:active>ul,
ul li ul:active {
  visibility: visible;
  display: block;
}

<ul>
  <li><a>1</a></li>
  <li><a>2</a></li>
  <li><a>3</a></li>
  <li>
    <a>4(доп список)</a>
    <ul class="dropdown">
      <li>а</li>
      <li>б</li>
      <li>в</li>
    </ul>
  </li>
  <li><a>5</a></li>
  <li><a>6</a></li>
</ul>

Answer 1

можно вот так например

.css-treeview div.dropdown ul {
  display: none;
}

.css-treeview div.dropdown>input:checked+ul {
  display: block;
}

input {
  visibility: hidden;
}

label {
  cursor: pointer;
}

<div class="css-treeview">
  <ul>
    <li><a>1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
    <li>
      <div class="dropdown ">
        <label for="mychk">4 (под список)</label>
        <input type="checkbox" id="mychk" />
        <ul>
          <li>а</li>
          <li>б</li>
          <li>в</li>
        </ul>
      </div>
    </li>
    <li><a>5</a></li>
    <li><a>6</a></li>
  </ul>
</div>

БЛОГ НА HUSL

список скрыть/показать

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