- ベストアンサー
Javascriptでプルダウンメニューを作りましたが関数化できません
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> function foldmenu(i){ var i; for(j=1;j<=5;j++){ if(i==j) $('#sc'+j).toggle('normal'); else $('#sc'+j).hide(); } $(function(i){ $('#c'+i).click(function(){ for(j=1;j<=5;j++){ if(i==j) $('#sc'+j).toggle('normal'); else $('#sc'+j).hide(); } }); }); } </script> <div id="c1" onClick="foldmenu('1')">1</div> <ul id="sc1"> <li><a href="#">入力画面1-1</a></li> <li><a href="#">入力画面1-1</a></li> </ul> <div id="c2" onClick="foldmenu('2')">2</div> <ul id="sc2"> <li><a href="#">入力画面2-1</a></li> <li><a href="#">入力画面2-2</a></li> </ul> <div id="c3" onClick="foldmenu('3')">3</div> <ul id="sc3"> <li><a href="#">入力画面3-1</a></li> <li><a href="#">入力画面3-2</a></li> </ul> <div id="c4" onClick="foldmenu('4')">4</div> <ul id="sc4"> <li><a href="#">入力画面4-1</a></li> <li><a href="#">入力画面4-2</a></li> </ul> <div id="c5" onClick="foldmenu('5')">5</div> <ul id="sc5"> <li><a href="#">入力画面5-1</a></li> <li><a href="#">入力画面5-2</a></li> </ul> と関数化しましたがうまく動きません。 初期状態では1の部分が開く。 それ以降はクリックした部分が開き開いていた部分は閉じるという感じにしたいです。 縦長のプルダウンメニューです。 たてに1から5が並んでいて、1をクリックすると１と2の間に1の子カテゴリーが表示されます。 困っています。教えてください。
- eccschool
- お礼率8% (53/644)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
#1、#2ですでに回答はでていますが・・・ id利用で操作していると、onClick="foldmenu('1')"、onClick="foldmenu('2')"…みたいなことをしなくてはならなくなるし、項目の数を増減するだけでもスクリプトを修正しなければならなくなってしまいます。 HTMLの構造の情報を元に処理するように記述しておけば、HTMLソースはその構造を変えない限り自由に編集可能になるので便利です。 例えば、ご提示のソースからidとonclickを全てはずして、その代わりに全体をラップするid付きのdivを追加すれば、以下のようにできます。 （実はjqueryはよく知らないので、少々いい加減です） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <style type="text/css"> #wrap ul {list-style:none; } </style> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> <!-- $(function() { $('#wrap ul').hide(); $('#wrap ul:first').show(); $('#wrap div').click(function() { $(this).next('ul').toggle('normal').siblings('ul').hide(); }); }); //--> </script> </head> <body> <div id="wrap"> <div>1</div> <ul> <li><a href="#">入力画面1-1</a></li> <li><a href="#">入力画面1-1</a></li> </ul> <div>2</div> <ul> <li><a href="#">入力画面2-1</a></li> <li><a href="#">入力画面2-2</a></li> </ul> <div>3</div> <ul> <li><a href="#">入力画面3-1</a></li> <li><a href="#">入力画面3-2</a></li> </ul> <div>4</div> <ul> <li><a href="#">入力画面4-1</a></li> <li><a href="#">入力画面4-2</a></li> </ul> <div>5</div> <ul> <li><a href="#">入力画面5-1</a></li> <li><a href="#">入力画面5-2</a></li> </ul> </div> </body> </html> ----------------------------------------------- ご提示の構成はメニューが親子だけで孫やひ孫がありませんが、そのような階層に対応することを考慮するなら、全体の構成を同じにして <ul> <li> <ul> <li> </li> <li> </li> </ul> </li> <li> </li> </ul> のように、同じ構成にしておいたほうが便利です。 階層があるので、閉じる（=非表示にする）ときに子孫まで全部閉じておくか、そのままにしておいて必要なものだけ閉じるかで、次に開いたときの見え方がかわります。 以下の例は後者の例。（次に開いた時に、閉じた時の状態で開く） （CSSのtext-decorationは「>」を利用すると簡単に書けるけれど、効かないブラウザがあるみたいなので、ローテクで…） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <style type="text/css"> #navi { list-style:none; padding:0; margin:0; } #navi li a{ text-decoration:none; } #navi ul li a{ text-decoration:underline; } #navi ul { list-style:none; } </style> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> <!-- $(function() { $('#navi ul').hide(); $('#navi > li:first > ul').show(); //子供にulを持つliのa要素にイベントを設定 $('#navi li:has(ul)').children('a').click( function() { $(this).parent().children('ul').toggle('normal'); $(this).parent().siblings().children('ul').hide(); }); }); //--> </script> </head> <body> <ul id="navi"> <li><a href="#">1</a> <ul> <li><a href="#">入力画面1-1</a> <ul> <li><a href="#">入力画面1-1-1</a></li> <li><a href="#">入力画面1-1-2</a></li> </ul> </li> <li><a href="#">入力画面1-2</a></li> </ul></li> <li><a href="#">2</a> <ul> <li><a href="#">入力画面2-1</a> <ul> <li><a href="#">入力画面2-1-1</a> <ul> <li><a href="#">入力画面2-1-1-1</a></li> <li><a href="#">入力画面2-1-1-2</a></li> </ul> </li> <li><a href="#">入力画面2-1-2</a></li> </ul> </li> <li><a href="#">入力画面2-2</a></li> </ul></li> <li><a href="#">3</a> <ul> <li><a href="#">入力画面3-1</a></li> <li><a href="#">入力画面3-2</a></li> </ul></li> </ul> </body> </html>
その他の回答 (2)
- yyr446
- ベストアンサー率65% (870/1330)
「初期状態では1の部分が開く」忘れました。 でしたね、それとget(0)書き忘れました。 （正しくは） <script type="text/javascript" charset="utf-8"> <!-- $(function(){ for(var i=1;i<=5;i++){ $('#c'+i).click(function(){ for(var j=1;j<=5;j++){ if($(this).get(0)==$('#sc'+j).prev('div').get(0)){ $('#sc'+j).toggle('normal'); }else{ $('#sc'+j).hide(); } } }); } $('#c1').click(); $('#c1').click(); }); // --> </script> です。 この手の処理はidで操作するとかえって面倒になりますよ．．．
補足
ご返答有難うございます。 こういうことだったんですね・・・。 あと1点ですが、初期状態でアクセスすると1の項目が開いて→閉じて→開くという微妙な動作が生じています。 いわば「パクパク」の状態です。 これを解消するために試行錯誤しているのですが、うまくいっていません。 解決方法をご存知であれば教えてください。 Javascriptって難しいですね。
- yyr446
- ベストアンサー率65% (870/1330)
ご提示のコードに文法ミス（ { } の不足とか、$(function(i){とか) が見受けられますが、それはおいといて、 次のようにします。 ※onClick="foldmenu('1')"の記述は全て削除した上で、 <script type="text/javascript"> <!-- $(function(){ for(var i=1;i<=5;i++){ $('#c'+i).click(function(){ for(var j=1;j<=5;j++){ if($(this)==$('#sc'+j).prev('div').get(0)){ $('#sc'+j).toggle('normal'); }else{ $('#sc'+j).hide(); } } }); } }); // --> </script> <div id="c1">1</div> <ul id="sc1"> <li><a href="#">入力画面1-1</a></li> <li><a href="#">入力画面1-1</a></li> </ul> <div id="c2">2</div> <ul id="sc2"> <li><a href="#">入力画面2-1</a></li> <li><a href="#">入力画面2-2</a></li> </ul> <div id="c3">3</div> <ul id="sc3"> <li><a href="#">入力画面3-1</a></li> <li><a href="#">入力画面3-2</a></li> </ul> <div id="c4">4</div> <ul id="sc4"> <li><a href="#">入力画面4-1</a></li> <li><a href="#">入力画面4-2</a></li> </ul> <div id="c5">5</div> <ul id="sc5"> <li><a href="#">入力画面5-1</a></li> <li><a href="#">入力画面5-2</a></li> </ul> ※ちなみに $(function(){ －－－－－－ }); というのは、 $(document).ready( function(){ －－－－－－ } ); の意味で、第一引数には、jQuery eventがセットされます。
補足
ご回答有難うございます。 こちらの方式が最適だと感じました。 本当に有難うございました。