JSドロップダウンリストの動的収縮と展開

1678 ワード


ヒント:自分のメニューリストに適用するために柔軟に修正すれば、結果は絶対に満足しています.自分で書かない前に私もネットでたくさん調べましたが、自動収縮と展開を満たすことができないか、定義が複雑でデータベースに接続して一括定義することができません.下のJSコードは修正しなくてもいいです.HTML形式でメニューの親リストを追加すればいいだけで、とても簡単に使えます. 
簡単に述べる
JSコードの中のintagはイベントのソースで、イベントの中に置くのはthisで、あなたのドロップダウンリストのJSPあるいはHTML 5コードが下の例の規範に合致する限り、直接JSコードをコピーして直接引用することができます.
使用方法:
ドロップダウン・リストはフォーマットを定義します(divごとにイベントを追加します).親メニューごとにレベル1のメニューを追加するだけです.
 

 
 
 
 
 
JSコードページをロードしてからリスト全体を展開する必要がある場合はexecuteInstently()関数を削除
 

		//           ,   
		function executeInstently() {
			var tmp = document.getElementsByTagName("ul");
			for (i = 1; i < tmp.length; i++) {
				tmp[i].style.display = "none";
			}
		}
		function filters(intag) {
			if (intag.tagName == "DIV" || intag.tagName == "div") {
				var taga = intag.parentNode;
				var present = taga.getElementsByTagName("ul")[0];
				if (present.style.display == "block") {
					help(taga);
				} else {
					help(taga);
					present.style.display = "block";
				}
			}
			function help(intag) {
				var fathertag = intag.parentNode;
				var sontag = fathertag.getElementsByTagName("ul");
				for (i = 0; i < sontag.length; i++) {
					sontag[i].style.display = "none";
				}
			}
		}
		executeInstently();