用HTML和CSS实现点击内容显示再点击隐藏

实现思路：

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;
}

　　

转载于:https://www.cnblogs.com/chen-haobox/p/9575216.html