こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

【短い】1つだけ展開/表示/非表示/開閉【Javascript】

このスクリプト、もっと短くなりませんか?
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>

投稿日時 - 2008-10-16 20:00:41

QNo.4406587

暇なときに回答ください

質問者が選んだベストアンサー

あえて他人とは違う方法で!
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>

投稿日時 - 2008-10-16 21:20:14

お礼

すごく・・・短いですw!
実際はbodyどこクリックしても閉じてしまうのはちょっと困ることもあるので少し手を加えないといけないけど、それでも短いですね。
ところどころ理解不能だけど解析がんばります。
ありがとうございました~。

投稿日時 - 2008-10-16 22:17:12

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.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>

投稿日時 - 2008-10-16 21:18:36

お礼

回答ありがとうございます。
これだとタグ指定なので少し応用範囲が狭まってしまうかもしれませんが、パターンを利用するのですね。
優しいスクリプトだと思います。

投稿日時 - 2008-10-16 22:11:12

あなたにオススメの質問