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 eligendi repudiandae. Sequi debitis, totam, praesentium laudantium numquam eum
- voluptatibus non eligendi saepe animi quibusdam delectus ab nostrum, perferendis libero eaque
- magnam officia aperiam! Voluptate nam dolorem eligendi, quasi harum deserunt.
- Quibusdam eveniet delectus optio deleniti maiores libero incidunt?
- </p>
- </div>
CSS 实现代码:
- p{
- border: 1px solid red;
- height: 0px;
- /* display: none; */
- overflow: hidden;
- }
- input:checked~p{
- /* display: block; */
- overflow: visible;
- }
来源: http://www.bubuko.com/infodetail-2752615.html