html和css如何实现点击出现隐藏列表

发布网友发布时间：2022-04-20 13:54

共3个回答

热心网友时间：2022-04-06 12:34

需要使用到js，获取到点击按钮
声明一个变量为 var flag = false
当点击时 if(！flag){ flag = true ，把要显示的元素设置display为none}else{ flag= false， display设置为block}

热心网友时间：2022-04-06 13:52

使用display属性，就可以实现该功能

热心网友时间：2022-04-06 15:27

1.display:none,隐藏元素;点击时display:black;
2.设置隐藏元素高度为0，overflow:hidden;点击时overflow:visible;
由于第一条只能实现点击时显示，不能实现继续隐藏；排除方法1。
考虑复选框特性，点击时样式框内有小勾，再点击时小勾消失。

HTML实现代码：

点击

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 incint?

CSS实现代码：
p{
border: 1px solid red;
height: 0px;
/* display: none; */
overflow: hidden;
}
input:checked~p{
/* display: block; */
overflow: visible;
}