- ベストアンサー
シングルクリックで開閉するリストページを作成する方法
- JavaScriptを使用して、シングルクリックでリストを開閉するリストページを作成する方法について解説します。
- サンプルコードを元に、ダブルクリックからシングルクリックに変更し、また一度展開したリストを閉じるまで展開し続ける仕様に変更する方法を紹介します。
- 初心者向けに分かりやすい単純な方法で実装しています。また、SEOに配慮したタイトルやハッシュタグも上記リソースを参考に作成しています。
- lalakko123
- お礼率100% (5/5)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
まず、コメントを付ける、全体の流れを把握する事をオススメします。 何をしているのかなど、一つ一つ理解していき、コメントを残す事で少しずつ理解できると思います。 また、解りやすいように、階層毎に先頭にスペースかタブを入れてあげると、見やすいかと思います。 そして、HTML部とJavaScript部、そしてスタイルシート部という概念に関して理解されてい無い場合は、そちらも合わせて勉強されると良いかと思います。 本題に入ります。 > window.onload=function(){ > setNavi(); > hideNavi(); > } この箇所は、ウィンドウが読み込まれた時の処理です。 単純に『setNavi()』と『hideNavi()』という関数を呼び出しています。 なので、流れに沿って、setNaviから見ていきましょう。 > 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; > } > } setNaviは、<ul id="navi">タグ配下にある<a>タグについて設定を行っています。 それを定義しているのが、上記の２行目に当たります。getElementById で id=navi のエレメントを探し出します。 続けて getElementsByTagName で id=navi のエレメント配下の <a>タグを選択し、それを tags という変数に定義しています。 この場合、id=navi配下の aタグが複数ありますので、それを tags[] という変数の配列にします。 これにより、12個あるので、tags[0] ～ tags[11] というショートカットのような物になります。 次に、for 文で、tags[0] ～ tags[11]を順に見ていくという事をしています。 if 文の箇所は、aタグの href (リンク先) が # で始まっているかという事を見ています。 この条件式に関しては正規表現というものが含まれています。 そして、# で始まっていれば条件式の結果は true (真) になりますので、後ろに記述されている命令が動きます。 動いている命令は、該当した aタグをクリックした際に、 disp という関数を呼び出すという事を定義しています。 このように、順に見ていき、変更するのが良いかと思います。 このサンプルを修正するのであれば、disp に記述されている下記の行をコメントアウトすることで、思うとおりの動きになると思います。 hideNavi(); ↓ // hideNavi(); 頑張って下さい！
お礼
修正方法をご教示いただきまして、ありがとうございます。 また、詳細な解説をつけていただき、大変助かりました。 あせらず、１つ１つコメントをつけながら読み解いて行けば良いのですね。 本当にありがとうございました。