このスクリプト、もっと短くなりませんか？ idがdisp0,disp20などdisp+数字になっているものを開閉するスクリプト。動作：対象を開き他を閉じる、対象が開いていた場合対象を閉じる。条件：連番（0から順番）じゃなくても（0,1,2,7みたいに飛んでも）動作する。 1つだけ展開/表示/非表示/開閉 //idがdisp+数字のものを格納 var kakunou = new Array(); window.onload=function(){ var tags=document.getElementsByTagName("*"); for(var i=0;i ＋ ■検索サイト１ ├ Yahoo! ├ Goo └ Lycos ＋ ■検索サイト２ ├ Infoseek ├ Google └ Kids Goo ＋ ■検索サイト３ ├ Excite └ MSN

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

解決済

質問者：xindex
質問日時：2008/10/16 20:00
回答数：2件

このスクリプト、もっと短くなりませんか？
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>■検索サイト１<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>■検索サイト２<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>■検索サイト３<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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： _pipi_
回答日時：2008/10/16 21:20

あえて他人とは違う方法で！

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>■検索サイト１<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>■検索サイト２<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>■検索サイト３<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>

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2008/10/16 22:17

No.1

回答者： yambejp
回答日時：2008/10/16 21:18

この手のメニューはやっぱりリストの方がよくないですか？

また、構造に法則性があるので下手に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>■検索サイト１</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>■検索サイト２</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>■検索サイト３</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>