html+css+js简易展开收起效果
⽤html+css+js做⼀个简易的⽂本展开收起效果。如图：
（部分结构标签可能不是最佳选择，此次仅以实现展开收起效果为例⼦）
以HBuilder编辑器选项卡中“查”选项为例。设定“查”为链接，点击链接实现标签的展开收起效果。####1.html部分
①.⾸先确定该选项的构成：⼀个显⽰标签和⼀组隐藏选项。html的整体结构框架为：
<div id="showdiv">
<a id="change"> </a>
<div id="hidediv"> </div>
</div>
②.确定好主体框架后，下⾯来具体完善html内容：
<div id="showdiv" >
<a href="javascript:show()" id="change">查+</a>
<div id="hidediv" >
<ul>
<li>搜索条(F)  Ctrl+F</li>
<li>搜索框(s)</li>
<li>查⽂件(T)</li>
<li>搜索下⼀个(N)</li>
<li>搜索上⼀个(P)</li>
<li>⽂本搜索(X)</li>
<hr>
<li>多⽂本⽐较(C)</li>
<li>历史版本⽐较(H)</li>
<li>提取(T)</li>
<li>HTML标签规范(P)</li>
</ul>
</div>
</div>
⽤⼀个⽆序列表来罗列出各个⼦选项；
并在a标签中调⽤实现展开效果的js⽅法：show( );
注意设置hidediv部分的display属性为"none"，即初始时该部分不显⽰。
####2.CSS部分
①.设置标签的容器⼤⼩以及位置于页⾯正中间，保证显⽰的内容⽔平居中：
#showdiv{
height:400px;
width:300px;
html ul标签
margin: 0 auto;
padding:10px 0 0 0;
}
②.设置链接的背景颜⾊以及链接在访问时的颜⾊状态，以及标签向右浮动：
#showdiv a{
float: right;
background: lightblue;
height: auto;
width:80px;
margin: 0 auto;
color:black;
text-decoration: none;
text-align: center;
}
#showdiv a:hover a:visited{
background: powderblue;
}
③.隐藏⼦选项背景颜⾊，⼤⼩，以块级显⽰，同样向右浮动于选项标签右端对齐：
#hidediv{
float: right;
background:gainsboro;
width:300px;
margin:0 auto;
text-align: left;
}
#hidediv li {
display: block;
}
####3.javascript部分
①.展开⽅法show( ):
function show(){
}
②.收起⽅法hide( ):
function hide(){
}
注意在每个⽅法最后都要添加对应的另⼀个⽅法，保证下⼀次在点击的时候可以直接调⽤另⼀个⽅法。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。