このスクリプト、もっと短くなりませんか?
idがdisp0,disp20などdisp+数字になっているものを開閉するスクリプト。
動作:対象を開き他を閉じる、対象が開いていた場合対象を閉じる。
条件:連番(0から順番)じゃなくても(0,1,2,7みたいに飛んでも)動作する。
<html>
<head>
<title>1つだけ展開/表示/非表示/開閉</title>
<script>
//idがdisp+数字のものを格納
var kakunou = new Array();
window.onload=function(){
var tags=document.getElementsByTagName("*");
for(var i=0;i<tags.length;i++){
if(tags[i].id.match(/^disp[0-9]+$/)){
mituketa=tags[i].id.match(/^disp[0-9]+$/);
kakunou.push(mituketa);
}
}
}
//開閉処理部分
function disp(tage) {
for(i=0;i<kakunou.length;i++){
cb = document.getElementById(kakunou[i]).style;
if(kakunou[i]==tage){
if (cb.display == 'none') cb.display = "block"; else cb.display = "none";
} else {
cb.display = 'none';
}
}
}
</script>
</head>
<body>
<a href="javaScript:disp('disp1')">+</a>■検索サイト1<br>
<div id="disp1" style="display:none">
├<a href="http://www.yahoo.co.jp/">Yahoo!</a><br>
├<a href="http://www.goo.ne.jp/" >Goo</a><br>
└<a href="http://www.lycos.co.jp/">Lycos</a><br>
</div>
<a href="javaScript:disp('disp200')">+</a>■検索サイト2<br>
<div id="disp200" style="display:none">
├<a href="http://www.infoseek.co.jp/">Infoseek</a><br>
├<a href="http://www.google.com/" >Google</a><br>
└<a href="http://kids.goo.ne.jp/">Kids Goo</a><br>
</div>
<a href="javaScript:disp('disp30')">+</a>■検索サイト3<br>
<div id="disp30" style="display:none">
├<a href="http://www.excite.co.jp/">Excite</a><br>
└<a href="http://www.msn.com/" >MSN</a><br>
</div>
</body>
</html>
No.2ベストアンサー
- 回答日時:
あえて他人とは違う方法で!
idも使わず、classだけ!
それから
<a href="javascript:~
は、使わないほうが・・・
<html>
<head>
<title>1つだけ展開/表示/非表示/開閉</title>
<style>
.h{display:none; }
.d{display:block; }
</style>
<script>
window.onload = function(){
document.body.onclick = chk;
}
function chk(e){
var obj = e?e.target:event.srcElement;
var objs = document.getElementsByTagName('a');
for(var i=0,m=objs.length;i<m;i++){
if(objs[i].className=='m'){
var d=objs[i];
do{ d=d.nextSibling;} while(d.nodeName!='DIV')
d.className=(obj==objs[i]&&d.className=='h')?'d':'h';
}
}
}
</script>
</head>
<body>
<a href="#" class="m">+</a>■検索サイト1<br>
<div class="h">
├<a href="http://www.yahoo.co.jp/">Yahoo!</a><br>
├<a href="http://www.goo.ne.jp/" >Goo</a><br>
└<a href="http://www.lycos.co.jp/">Lycos</a><br>
</div>
<a href="#" class="m">+</a>■検索サイト2<br>
<div class="h">
├<a href="http://www.infoseek.co.jp/">Infoseek</a><br>
├<a href="http://www.google.com/" >Google</a><br>
└<a href="http://kids.goo.ne.jp/">Kids Goo</a><br>
</div>
<a href="#" class="m">+</a>■検索サイト3<br>
<div class="h">
├<a href="http://www.excite.co.jp/">Excite</a><br>
└<a href="http://www.msn.com/" >MSN</a><br>
</div>
</body>
</html>
すごく・・・短いですw!
実際はbodyどこクリックしても閉じてしまうのはちょっと困ることもあるので少し手を加えないといけないけど、それでも短いですね。
ところどころ理解不能だけど解析がんばります。
ありがとうございました~。
No.1
- 回答日時:
この手のメニューはやっぱりリストの方がよくないですか?
また、構造に法則性があるので下手にidはつけなくても開閉できますね
こんなんでどうでしょう?
<html>
<head>
<title>1つだけ展開/表示/非表示/開閉</title>
<script>
window.onload=function(){
setNavi();
hideNavi();
}
function setNavi(){
var tags=document.getElementById("navi").getElementsByTagName("a");
for(var i=0;i<tags.length;i++){
if(tags[i].href.match(/#$/)) tags[i].onclick=disp;
}
}
function hideNavi(){
var n=document.getElementById("navi").firstChild;
while(n){
if(n.nodeName=="LI") n.className="hide";
n=n.nextSibling;
}
}
function disp() {
var pp=this.parentNode.parentNode;
var flg=pp.className=="hide";
hideNavi();
pp.className=flg?"":"hide";
return false;
}
</script>
<style>
#navi,#navi ul{
margin:0px;
padding:0px;
list-style:none;
}
#navi li.hide ul{
display:none;
}
</style>
</head>
<body>
<ul id="navi">
<li>
<div><a href="#">+</a>■検索サイト1</div>
<ul>
<li>├<a href="http://www.yahoo.co.jp/">Yahoo!</a></li>
<li>├<a href="http://www.goo.ne.jp/">Goo</a></li>
<li>└<a href="http://www.lycos.co.jp/">Lycos</a></li>
</ul>
</li>
<li>
<div><a href="#">+</a>■検索サイト2</div>
<ul>
<li>├<a href="http://www.infoseek.co.jp/">Infoseek</a></li>
<li>├<a href="http://www.google.com/">Google</a></li>
<li>└<a href="http://kids.goo.ne.jp/">Kids Goo</a></li>
</ul>
</li>
<li>
<div><a href="#">+</a>■検索サイト3</div>
<ul>
<li>├<a href="http://www.excite.co.jp/">Excite</a></li>
<li>└<a href="http://www.msn.com/">MSN</a></li>
</ul>
</li>
</ul>
</body>
</html>
回答ありがとうございます。
これだとタグ指定なので少し応用範囲が狭まってしまうかもしれませんが、パターンを利用するのですね。
優しいスクリプトだと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- PHP if(preg_match("/[^0-9]/",$gu_d)){意味を教えてください。 1 2022/05/06 05:37
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- PHP ここでの ②if($su_d<>"")の比較演算子 を使う理由は 1 2022/03/26 02:33
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
どの<li><a> が押されたか判別...
-
質問に答えていくと、回答によ...
-
【javascript で動的に a タグ...
-
クリックした<a>タグのみにClas...
-
DOM の 要素の数え方について
-
javascriptでEnterキーをtabキ...
-
固定ナビのJqueryのアコーディ...
-
<ul>から</ul>の間をjavascriptで
-
jQuery タブメニューへのダイ...
-
戻ってきた時ツリーメニューが...
-
C# ブラウザの自動クリック
-
jQueryで、リンクURLの一致を確...
-
【jQuery】遅延実行(タイムラ...
-
JQueryタブのアクティブ アン...
-
チェックボックスに入っている...
-
オンマウスで画像ロールオーバ...
-
文字と数字が混在する要素のsor...
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
javascriptでEnterキーをtabキ...
-
クリックした<a>タグのみにClas...
-
チェックボックスに入っている...
-
【javascript で動的に a タグ...
-
jquery ドロップダウンメニュー...
-
「jQuery」アコーディオンメニ...
-
jQueryで、リンクURLの一致を確...
-
jQueryのeqで最後からn番目以降...
-
ネストされたチェックボックス...
-
javascriptで、クリックしたら...
-
onmouseoverの表示切り替えが上...
-
文字と数字が混在する要素のsor...
-
jQueryでネスト構造の<li>がク...
-
タブメニューを上下に設置
-
<li></li>の数を制限
-
jQuery多層式アコーディオンメ...
-
どの<li><a> が押されたか判別...
-
CSSとJavaScriptを使ってドロッ...
-
複数の画像をランダム(シャッ...
おすすめ情報