效果图：
方法一：利用按钮的checked模拟点击事件
1） 将按钮(<inputtype="radio"name="btn" />)覆盖在伪按钮（用标签模拟的按钮）上，并且把按钮透明度（opacity）设置为0；
2） 当按钮被选中（checked）时,改变伪按钮的样式。
3） 当按钮被选中（checked）时,改变内容框的样式（height）。
html:
<ul>
<li>
<inputclass="ww"type="radio"name="btn"checked/>
<ahref="">Brand</a>
<textareaclass="qq">
内容1
</textarea>
</li>
<li>
<inputtype="radio"name="btn" />
<ahref="">Two</a>
<textareaclass="qq">
内容2
</textarea>
</li>
<li>
<inputtype="radio"name="btn" />
<ahref="">Three</a>
<textareaclass="qq">
内容3
</textarea>
</li>
</ul>
CSS:
<style>
*{padding:0;margin:0;}
ul{
width:510px;
margin:0auto;
}
li{
width:510px;
border-radius:10px;
list-style:none;
position:relative;
}
a{
display:block;
height:40px;
line-height:40px;
text-decoration:none;
font-size:20px;
padding:00010px;
background-color:#CCC;
font-weight:bold;
border-radius:10px;
}
a:after{
content:"";
display:block;
width:20px;
height:40px;
float:right;
background:url("./img/2.png")no-repeat 0px16px; //(背景图片是小三角形，可忽略)
}
input{
width:100%;
height:40px;
position:absolute;
cursor:pointer;
}
input{
opacity:0;//透明度设置为0.
}
input:checked +a{//按钮被选中时改变a(伪按钮)样式
background-color:#0000FF;
color:white;
}
input:checked +a:after{//(背景图片是小三角形，可忽略)
background:url("./img/1.png")no-repeat 0px16px;
}
textarea{
border:none;
width:510px;
height:0px;/*内容高度为0*/
transition:1s;/*设置高度由0~(100px)的过度时间*/
resize:none;
outline:none;
}
input:checked~textarea{//按钮被选中时内容框高度变大。
height:100px;
}
</style>
方法二：利用target模拟点击事件
1）target伪类用来改变页面中锚链接URL所指向的ID样式
Html:
<body>
<divclass="box">
<divclass="menu"id="one">
<h2><ahref="#one">one</a></h2>
<p>
内容1
</p>
</div>
<divclass="menu"id="two">
<h2><ahref="#two">two</a></h2>
<p>
内容2
</p>
</div>
<divclass="menu"id="three">
<h2><ahref="#three">three</a></h2>
<p>
内容3
</p>
</div>
</div>
</body>
CSS:
<style>
*{
padding:0;
margin:0;
}
.box{
width:500px;
margin:0auto;
}
.menuh2{}
.menuh2a{
display:inline-block;
width:100%;
height:40px;
border-radius:10px;
background:#ccc;
text-decoration:none;
line-height:40px;
padding-left:10px;
box-sizing:border-box;
position:relative;
}
.menuh2a:after{//模拟三角形
content:"";
display:block;
border:5pxsolid white;
border-color:transparenttransparenttransparent white;
position:absolute;
right:10px;
top:15px;
}
.menup{
height:0;
overflow:hidden;
transition:1s;
}
.menuh2a:hover,
.menu:targeta{
color:#fff;
background-color:blue;
}
.menu:targeta:after{
transform:rotate(90deg)
}
.menu:targetp{
height:100px;
overflow:auto;
}
</ style>
扫一扫
562
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
