html+css+js 简易展开收起效果

用html+css+js做一个简易的文本展开收起效果。如图：


（部分结构标签可能不是最佳选择，此次仅以实现展开收起效果为例子）
以HBuilder编辑器选项卡中“查找”选项为例。设定“查找”为链接，点击链接实现标签的展开收起效果。

####1.html部分

①.首先确定该选项的构成：一个显示标签和一组隐藏选项。html的整体结构框架为：

②.确定好主体框架后，下面来具体完善html内容：

 

		查找+
			

				

					
搜索条(F)  Ctrl+F
					
搜索框(s)
					
查找文件(T)
					
搜索下一个(N)
					
搜索上一个(P)
					
文本搜索(X)
				    

					
多文本比较(C)
					
历史版本比较(H)
					
提取(T)
					
HTML标签规范(P)
				
			
		

用一个无序列表来罗列出各个子选项；
并在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()";
			}

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