折りたたみメニューをスライドして開く

解決済

質問者：gigigi
質問日時：2008/03/29 07:56
回答数：4件

題名の通りなのですが、リンクをクリックすると指定した(DIVタグで)部分が展開したり閉じたりしたいと思っています。
下記URLの「Example 2」が理想なのですが、これを複数に適用することができないんです…

http://www.dynamicdrive.com/dynamicindex17/anima …

解決方法をご存知の方がおられましたらご教示お願いできないでしょうか。
どうかよろしくお願いします。

通報する

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

質問の本文を隠す

回答 (4件)

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

No.3ベストアンサー

回答者： auty
回答日時：2008/03/29 11:14

２箇所変更したオブジェクト名の使い方が、特殊なので、

ご希望に少しでも近づいたどうかは不明ですが、

・　各箇所の名前をすべて、
　　　　　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.dt …
<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>

- 0
- 件

通報する

この回答へのお礼

コードまで書いていただいて本当に助かります。
おかげさまで理想のものができあがりそうです。
度重なるご回答本当にありがとうございました。

通報する

お礼日時：2008/03/29 12:14

No.4

回答者： steel_gray
回答日時：2008/03/29 11:23

#2です。

＞初期の状態でDIVを折りたたんでおく
CSSで始めからdisplay:none;を設定してもいいし
Javascriptで設定するなら、hideというメソッドがありますので
$('#ss1').hide();
$('#ss2').hide();
または $('.XXX').hide(); (対象がclass="XXX"の場合)
このように記述してもいいです。（#2の $(function(){の次行あたりに追加）

- 0
- 件

通報する

この回答へのお礼

希望にそえる形で再度投稿なさっていただいて感謝の限りです。
jQueryの解説を見ているとなかなか面白そうで興味ももてました。
度重なるご回答ありがとうございました。

通報する

お礼日時：2008/03/29 12:21

No.2

回答者： steel_gray
回答日時：2008/03/29 09:02

日本語の解説も多いし、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>

- 0
- 件

通報する

この回答へのお礼

迅速なご回答ありがとうございます。
jQueryだとかMMtoolsだとか言われると敷居が高そうで、やめてくれ～と思っておりましたが、簡略したソースを記載してくださったおかげで導入は簡単にできました。

実際使い勝手いいんですが、初期の状態でDIVを折りたたんでおくことはできるでしょうか？

通報する

お礼日時：2008/03/29 09:58

No.1

回答者： auty
回答日時：2008/03/29 08:44

問題の箇所が良く分かっていないかも知れませんが、

idは、ユニークでなければいけませんので、
cat
を
cat2
に変更し、オブジェクト名も２箇所
collapse2_1
に変更します。

以下のコードを参考にしてみてください。
------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<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;">

<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;">

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

- 0
- 件

通報する

この回答へのお礼

すごく助かります。自分でコピペして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)
ニュアンス的にはこんな感じでできればいいんですけれど。

迅速な回答ありがとうございました。

通報する

お礼日時：2008/03/29 09:42

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！