如何使用CSS隐藏过滤器的内容

Question

如何在css + html中实现这一目标？我希望点击图标时隐藏过滤器内的所有内容。

我们如何在css中获得这个？

Answer 1

您必须使用Jquery或Javascript执行此操作。

Answer 2

你可以在纯HTML + CSS中实现这一点，只需要一点点诡计。该方法涉及使用复选框的状态来确定是否应显示过滤器。这是一个基本设置。

<div>
  <label for="filter-cat-1">Category 1</label>
  <input class="toggle-display" id="filter-cat-1" type="checkbox">
  <ul>
    <li>Option 1</li>
    <li>Option 2</li>
  </ul>
</div>

接下来的CSS

.toggle-display {
  display: none;
}

ul {
  display: none;
}

.toggle-display:checked + ul {
  display: block;
}

现在这里发生了什么？如您所知，我们隐藏了复选框和ul元素。但是，我们添加了一个样式声明，该声明仅应用于ul，它直接放在CHECKED .toggle-display元素之后。这意味着只要选中我们的隐形复选框（单击标签后就会出现），ul就会出现。