用纯css做点击后会出现和消失的下拉菜单

首先，我们要了解input表单中的checkbox属性，可以通过type='checkbox'进行设置，当进行点击后input表单会被打钩选择，再次点击则会取消选中。
选中时返回的是true，未选中则返回false。

然后我们可以使用display: none;对其进行隐藏，来达到一个更好的观感。

当然我们需要去用label中的for标签邦顶input中的id名，于是当我们点击label后就相当于点击了input。

 <input type="checkbox" id="dianj">
        <label for="dianj">激活</label>

  然后进行菜单中的内容的设置

<span class="focus_text">
            <p>标题</p>
            <p>这是一段内容,这是一段内容,这是一段内容,这是一段内容。</p>
        </span>

让其使用`display: none;`进行隐藏，在点击激活后显示。

input:checked~span {
        display: block;
    }

结果：

激活后：

 取消激活后：