html css点击展开列表,html+js+css实现点击展开显示

实现思路：首先我们需要定义一个容器来存放内容；将溢出内容先隐藏，当点击按钮或文字时使原先定义的容器变大，并且能放下所有内容。

代码如下：

下拉与收起

integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="

crossorigin="anonymous">

body

{

margin: 0 auto;

padding: 0;

}

a:focus

{

outline: none;

}

#showhide

{

background: yellow;

color: white;

width: 600px;

display: block;

margin: 0 auto;

padding: 5px;

font-size: 20px;

height: auto;

font-family: "微软雅黑";

}

.slide

{

margin: 0;

padding: 0;

width: 600px;

border-top: solid 4px gray;

margin: 0 auto;

}

.btn-slide

{

background: gray;

text-align: center;

width: 120px;

height: 30px;

padding: 10px 10px 0 0;

margin: 0 auto;

display: block;/*块级元素*/

color: #fff;

text-decoration: none;/*去掉下划线*/

}

$(document).ready(function () {

$(".btn-slide").click(function () {

$("#show").slideToggle();

});

});

窗前明月光

疑似地上霜

举头望明月

低头思故乡

直至你在失望与孤独中死去

展开

效果如下：

标签：auto,js,padding,width,slide,html,text,margin,css

来源： https://blog.csdn.net/qq_40072583/article/details/94395606