- ベストアンサー
折りたたみタグのスクリプト探し
- 折りたたみタグを使っているが、一つ開くと他の開いたタグが閉じるスクリプトを探している。
- 既に使用している折りたたみタグのスクリプトを少し修正したいが、うまく動かない。
- 他の折りたたみタグのスクリプトを探しているが、できれば修正だけで対応したい。
- rinoglda
- お礼率63% (14/22)
- JavaScript
- 回答数11
- ありがとう数6
- みんなの回答 （11）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (10)
- mikemike7
- ベストアンサー率87% (97/111)
- dscripty
- ベストアンサー率51% (166/325)
- dscripty
- ベストアンサー率51% (166/325)
- mikemike7
- ベストアンサー率87% (97/111)
また無駄にレスしてみたり...悪い癖... 質問内容では、参考URLにない、クラス名をclose、openに変更されているわけなので、そういうところも考慮して作っているのでしょう。 考慮していないとしたら、後から気づいて学習することでしょう。 それは一つの経験ですよね。 No3,No4の回答はもっともな話だと思いますが、 そもそもDOMとかCSSが理解できない段階だとしたら、 今後のことを考慮して作り直せと言う方が酷な気がします。 私が同じ状態だったら？？？？だと思うなあ。 わかってる人にとっては案外簡単なことでも、 わかってない人にとってみたら？？？なことはよくあるし。 質問内容の最後に、簡単に修正したいとあったし、それに応じたソースを提示し、今後のアドバイスとして書いていたら、スマートに解決してたんじゃないかなあとか思ったり。 と、レス伸ばしてるのは私のせいかもしれないけど...。 まあ、質問者さんもありがとうだけお礼があっただけなので、進展あったかどうかもわからないけど、いきなり別世界みたいな話されて諦めたのかなとか勝手に思ったり。 やってみれば以外と簡単に仕上がるかもよ。 頑張って＾＾
お礼
どうぞ、とされてるサイトから引用させて頂いていた スクリプトだったので、それぞれの意味は正直ちんぷんかんぷんな初心者です。 ご指摘通りなんだかわざわざ難しい上級者向けのように書かれて諦めました。 自分で解決できるよう頑張ります。ありがとうございました。
- Chaire
- ベストアンサー率60% (79/130)
- dscripty
- ベストアンサー率51% (166/325)
- mikemike7
- ベストアンサー率87% (97/111)
- Chaire
- ベストアンサー率60% (79/130)
ID があるなら活用すべきです。それと、href="javascript:..." なんてのは NN4 の遺物ですので、もう止めて下さい。 <a href="#section-1" onclick="return GAccordion.call(this, event);">ラベル 1</a> <a href="#section-2" onclick="return GAccordion.call(this, event);">ラベル 1</a> <a href="#section-3" onclick="return GAccordion.call(this, event);">ラベル 1</a> <div> <div id="section-1">...</div> <div id="section-2">...</div> <div id="section-3">...</div> </div> <script type="text/javascript"> // IE 5.5+ function GAccordion (e) { var c = e.currentTarget || this; var d = c.ownerDocument; var s; if ((s = c.getAttribute('href' /*@cc_on, 2@*/))) { var id = s.slice (1); var div; if ((div = d.getElementById(id))) { id = /^(.*)(\d+)$/.exec (id); if (id[2]) { var prefix = id[1]; var n; for (n = div.parentNode.firstChild; n; n = n.nextSibling) { if (n.nodeType === 1 && n.id && n.id.indexOf(prefix) === 0) { n.style.display = 'none'; } } div.style.display = ''; // CSSOM } } } return false; } </script> 初期化はご自分で。どの道、スクリプトが動かない利用者は一定数いますので、そういった場合の代替措置は絶対に必要です。それができないとしたら、下手に仕掛けなど設けない方が無難です。 --- 最近のブラウザなら（手抜き）。 <style type="text/css"> @media only screen { *[role~="tab"] { cursor: pointer; } *[role~="tab"][tabindex="0"] { font-weight: bold; color: #800; } *[role~="tabpanel"][aria-hidden="true"] { display: none; } } </style> <ul role="tablist"> <li role="tab" id="tab-1" tabindex="0">ラベル 1</li> <li role="tab" id="tab-2" tabindex="-1">ラベル 2</li> <li role="tab" id="tab-3" tabindex="-1">ラベル 3</li> </ul> <div role="group"> <div role="tabpanel" aria-labelledby="tab-1" aria-hidden="false">...</div> <div role="tabpanel" aria-labelledby="tab-2" aria-hidden="true">...</div> <div role="tabpanel" aria-labelledby="tab-3" aria-hidden="true">...</div> </div> <script type="application/javascript"> if (document.implementation && // document.implementation.hasFeature ('Selectors-API', '1.0') && document.implementation.hasFeature ('Events', '2.0') && document.implementation.hasFeature ('HTML', '2.0')) { var GAccordion = { handleEvent: function (e) { var t = e.target; var d = t.ownerDocument; if (this.isTab (t)) { var tab = t; switch (e.type) { case 'focus' : this.activate (tab, t.parentNode.querySelector ('*[role~="tab"][tabindex="0"]')); return; case 'keydown' : switch (e.keyCode) { case 0x26: // DOM_VK_UP for (t = tab; t = t.previousSibling; ) { if (this.isTab (t)) { t.focus (); break; } } return; case 0x28: // DOM_VK_DOWN for (t = tab; t = t.nextSibling; ) { if (this.isTab (t)) { t.focus (); break; } } return; } } } }, isTab: function (n) { return n.nodeType === Node.ELEMENT_NODE && n.getAttribute ('role') === 'tab'; }, activate: function (tab1, tab2) { var d = tab1.ownerDocument; var tp = '*[role~="tabpanel"]'; tab2.setAttribute ('tabindex', '-1'); Array.forEach (d.body.querySelectorAll (tp + '[aria-labelledby~="' + tab2.id + '"]'), function (tabpanel) { tabpanel.setAttribute ('aria-hidden', 'true'); }); tab1.setAttribute ('tabindex', '0'); Array.forEach (d.body.querySelectorAll (tp + '[aria-labelledby~="' + tab1.id + '"]'), function (tabpanel) { tabpanel.setAttribute ('aria-hidden', 'false'); }); } }; document.addEventListener ('focus', GAccordion, true); document.addEventListener ('keydown', GAccordion, false); } </script>
お礼
簡単な修正でできることではないのですね。 ご回答ありがとうございました。
- mikemike7
- ベストアンサー率87% (97/111)
とりあえず無駄なところは省きましょうね。 ><div id="layer_@@@@" style="display:none" class="close"> classで切り替えるのにdisplayをnoneにしたりblockにするのは効率がよくありません。 <style type="text/css"><!-- div.close{display:none;} div.open{display:block;} --></style> として <div id="layer_@@@@" class="close"> とするべきです。 そうすることで、HTMLに無駄な記載をしなくても良くなりますし、 JavaScript部でも無駄な処理がなくなります。 以下ソースです。 // CSS部 div.close{display:none;} div.open{display:block;} // JavaScript部 function show(inputData) { var objID=document.getElementById( "layer_" + inputData ); var buttonID=document.getElementById( "category_" + inputData ); if(objID.className=='close') { // OPENされているDIVを閉じる var divobj = document.getElementsByTagName('div'); for (var i = 0; i < divobj.length; i++){ if (divobj[i].className == "open"){ //divobj[i].style.display='none'; divobj[i].className='close'; } } //objID.style.display='block'; objID.className='open'; }else{ //objID.style.display='none'; objID.className='close'; } } // HTML部 <a href="javascript:void(0)" id="category_@@@@" onClick="show('@@@@');">リンク</a> <a href="javascript:void(0)" id="category_2" onClick="show('2');">リンク2</a> <a href="javascript:void(0)" id="category_3" onClick="show('3');">リンク3</a> <div id="layer_@@@@" class="close"> 隠れた内容 </div> <div id="layer_2" class="close"> 隠れた内容2 </div> <div id="layer_3" class="close"> 隠れた内容3 </div>
お礼
ご回答ありがとうございます。
- askaaska
- ベストアンサー率35% (1455/4149)
考え方はシンプルです。 リンクをクリックすると いったん全てのリンクを閉じます。 そしてクリックしたものだけ開けばOKです。 閉じると開くの方法が分かれば 簡単に実装できるかと思います。
お礼
回答ありがとうございます。 できれば例としてタグで教えて頂けますと幸いです。
お礼
ご回答ありがとうございます。