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();