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" style="display:none">
				<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;
				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(){
				document.getElementById("hidediv").style.display="block";
				document.getElementById("change").innerHTML="查找-";
				document.getElementById("change").href="javascript:hide()";
			}
			

②.收起方法hide( ):

function hide(){
				document.getElementById("hidediv").style.display="none";
				document.getElementById("change").innerHTML="查找+";
				document.getElementById("change").href="javascript:show()";
			}

注意在每个方法最后都要添加对应的另一个方法，保证下一次在点击的时候可以直接调用另一个方法。