用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()";
			}

注意在每個方法最後都要新增對應的另一個方法，保證下一次在點選的時候可以直接呼叫另一個方法。