- ベストアンサー
折りたたみメニューをスライドして開く
題名の通りなのですが、リンクをクリックすると指定した(DIVタグで)部分が展開したり閉じたりしたいと思っています。 下記URLの「Example 2」が理想なのですが、これを複数に適用することができないんです… http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm 解決方法をご存知の方がおられましたらご教示お願いできないでしょうか。 どうかよろしくお願いします。
- gigigi
- お礼率91% (237/260)
- JavaScript
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
２箇所変更したオブジェクト名の使い方が、特殊なので、 ご希望に少しでも近づいたどうかは不明ですが、 ・ 各箇所の名前をすべて、 cat1,cat2 の形に変更して、 ・ // 1 の第一引数を "cat1,cat2" に替えれば動きます。 ・ サンプルのように６箇所以内で無ければ、 // 2 と // 3 を例に見習って増やしてください。 ------------------------------------------------------------ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="animatedcollapse.js"> </script> </head> <body> <p> <b>Example 2:</b> </p> <a href="javascript:cat1.slideit()">Show/ Hide DIV</a> <div id="cat1" style="width: 300px; background-color: #99E0FB;"> <div style="padding: 0 5px"> <h3> Content inside DIV! </h3> <h3> Content inside DIV! </h3> <h4> Note: No CSS height attribute defined. Persistence enabled. </h4> </div> </div> <p> <b>Example 2_1:</b> </p> <a href="javascript:cat2.slideit()">Show/ Hide DIV</a> <div id="cat2" style="width: 300px; background-color: #99E0FB;"> <div style="padding: 0 5px"> <h3> Content inside DIV! </h3> <h3> Content inside DIV! </h3> <h4> Note: No CSS height attribute defined. Persistence enabled. </h4> </div> </div> <script type="text/javascript"> var cat = new Array(); var cat1,cat2,cat3,cat4,cat5,cat6; // 2 setCat("cat1,cat2",800); // 1 function setCat(catsStr, w) { cats=catsStr.split(/,/); for (var i=0; i<cats.length ; i++) { cat[i+1]=new animatedcollapse(cats[i], w, true); } cat1=cat[1];cat2=cat[2];cat3=cat[3];cat4=cat[4];cat5=cat[5];cat6=cat[6]; // 3 } </script> </body> </html>
その他の回答 (3)
- steel_gray
- ベストアンサー率66% (1052/1578)
#2です。 ＞初期の状態でDIVを折りたたんでおく CSSで始めからdisplay:none;を設定してもいいし Javascriptで設定するなら、hideというメソッドがありますので $('#ss1').hide(); $('#ss2').hide(); または $('.XXX').hide(); (対象がclass="XXX"の場合) このように記述してもいいです。（#2の $(function(){の次行あたりに追加）
お礼
希望にそえる形で再度投稿なさっていただいて感謝の限りです。 jQueryの解説を見ているとなかなか面白そうで興味ももてました。 度重なるご回答ありがとうございました。
- steel_gray
- ベストアンサー率66% (1052/1578)
日本語の解説も多いし、jQueryを利用してみては？ http://www.google.com/search?q=jquery 例） <html> <head> <style type="text/css"> span{text-decoration:underline;cursor:pointer;} div div{background-color:#66ffff;} </style> <script type="text/javascript" src="jQuery.js"></script> <script type="text/javascript"> $(function(){ $('#s1').click(function(){ $('#ss1').toggle('normal'); }); $('#s2').click(function(){ $('#ss2').toggle('fast'); }); }); </script> </head> <body> <div><span id="s1">テキスト</span> <div id="ss1">ブロック</div> </div> <div> <span id="s2">テキスト</span> <div id="ss2">ブロック</disv> </div> </body> </html>
お礼
迅速なご回答ありがとうございます。 jQueryだとかMMtoolsだとか言われると敷居が高そうで、やめてくれ～と思っておりましたが、簡略したソースを記載してくださったおかげで導入は簡単にできました。 実際使い勝手いいんですが、初期の状態でDIVを折りたたんでおくことはできるでしょうか？
- auty
- ベストアンサー率58% (284/486)
問題の箇所が良く分かっていないかも知れませんが、 idは、ユニークでなければいけませんので、 cat を cat2 に変更し、オブジェクト名も２箇所 collapse2_1 に変更します。 以下のコードを参考にしてみてください。 ------------------------------------------------------------ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="animatedcollapse.js"> </script> </head> <body> <p> <b>Example 2:</b> </p> <a href="javascript:collapse2.slideit()">Show/ Hide DIV</a> <div id="cat" style="width: 300px; background-color: #99E0FB;"> <!--Your DIV content as follows. Note to add CSS padding or margins, do it inside a DIV within the Collapsible DIV --> <div style="padding: 0 5px"> <h3> Content inside DIV! </h3> <h3> Content inside DIV! </h3> <h4> Note: No CSS height attribute defined. Persistence enabled. </h4> </div> </div> <script type="text/javascript"> //Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] ) var collapse2=new animatedcollapse("cat", 800, true) </script> <p> <b>Example 2_1:</b> </p> <a href="javascript:collapse2_1.slideit()">Show/ Hide DIV</a> <div id="cat2" style="width: 300px; background-color: #99E0FB;"> <!--Your DIV content as follows. Note to add CSS padding or margins, do it inside a DIV within the Collapsible DIV --> <div style="padding: 0 5px"> <h3> Content inside DIV! </h3> <h3> Content inside DIV! </h3> <h4> Note: No CSS height attribute defined. Persistence enabled. </h4> </div> </div> <script type="text/javascript"> //Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] ) var collapse2_1=new animatedcollapse("cat2", 800, true) </script> </body> </html>
お礼
すごく助かります。自分でコピペしてidをcat2にしてみたときはダメだったんです。collapse2_1は勉強になりました。javascriptなんて読めないので、その辺りには見ることもなかったわけですごく助かります。 でこれは私の完全なミスなんですが、実はPHPの中に追記したいと思っているので、 <script type="text/javascript">var collapse2=new animatedcollapse("cat", 200, true)</script> これが邪魔に思うわけです。我侭なんですが何度もでてくるのが邪魔臭いというか・・・ ("$cat", 200, true) ("cat1,cat2,cat3", 200, true) ニュアンス的にはこんな感じでできればいいんですけれど。 迅速な回答ありがとうございました。
お礼
コードまで書いていただいて本当に助かります。 おかげさまで理想のものができあがりそうです。 度重なるご回答本当にありがとうございました。