Как показать таблицу при нажатии на кнопку?

Question

Как сделать так, чтобы при одинарном нажатии оставалась таблица, а не при зажиме?

ul.nav li:active>ul {
  display: block;
}

<ul class="nav">
  <li><a href="#">фильтр</a>
    <ul>
      <li><a href="#">пункт 1.1</a></li>
      <li><a href="#">пункт 1.2</a></li>
      <li><a href="#">пункт 1.2</a></li>
    </ul>
  </li>
</ul>

Answer 1

Думаю, поможет в решении этой проблемы - focus:

CSS .nav {
  display: inline-block;
  position: relative;
}

.down-menu {
  opacity: 0;
  pointer-events: none;
  transition: all .2s ease
}

.btn:focus+.down-menu {
  pointer-events: auto;
  opacity: 1;
}

<ul class="nav">
  <li><a class="btn" href="#">фильтр</a>
    <ul class="down-menu">
      <li><a href="#">пункт 1.1</a></li>
      <li><a href="#">пункт 1.2</a></li>
      <li><a href="#">пункт 1.2</a></li>
    </ul>
  </li>
</ul>

Answer 2

document.querySelector('.li').addEventListener('click', ()=>{
document.querySelector('.ul').classList.toggle('active')
})

.ul.active {
  display: none;
}

<ul class="nav">
  <li class="li">фильтр
    <ul class="ul">
      <li><a href="#">пункт 1.1</a></li>
      <li><a href="#">пункт 1.2</a></li>
      <li><a href="#">пункт 1.2</a></li>
    </ul>
  </li>
</ul>

БЛОГ НА HUSL

Как показать таблицу при нажатии на кнопку?

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