1.display:none,隐藏元素;点击时display:black;

2.设置隐藏元素高度为0，overflow:hidden;点击时overflow:visible;

由于第一条只能实现点击时显示，不能实现继续隐藏；排除方法1。

考虑复选框特性，点击时样式框内有小勾，再点击时小勾消失。

HTML实现代码：

  <div>
        <input type="checkbox" id="dianji">
        <label for="dianji">
            点击
        </label>
        <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
　　　　　　　Commodi optio sed e***di repudiandae. Sequi debitis, totam, praesentium laudantium numquam eum 
            voluptatibus non e***di saepe animi quibusdam delectus ab nostrum, perferendis libero eaque
            magnam officia aperiam! Voluptate nam dolorem e***di, quasi harum deserunt. 
            Quibusdam eveniet delectus optio deleniti maiores libero incidunt?
        </p>
        
    </div>

CSS实现代码：

1 2 3 p{border:1pxsolidred;height:0px; /* display: none; */ overflow:hidden; } 1 2 3 4 5 input:checked~p{/* display: block; */overflow:visible;}