シングルクリックで開閉するリストページを作成する方法
- JavaScriptを使用して、シングルクリックでリストを開閉するリストページを作成する方法について解説します。
- サンプルコードを元に、ダブルクリックからシングルクリックに変更し、また一度展開したリストを閉じるまで展開し続ける仕様に変更する方法を紹介します。
- 初心者向けに分かりやすい単純な方法で実装しています。また、SEOに配慮したタイトルやハッシュタグも上記リソースを参考に作成しています。
- ベストアンサー
クリックすると内容が展開されるリスト
親項目をクリックすると、隠れていた子項目が表示され、 再び親項目をクリックすると、子項目が隠れる。 といったページを作成するため（http://www.openspc2.org/reibun/javascript/mouse/060/index.html）より、サンプルをいただきました。 これを、さらに ・「ダブルクリックではなく、シングルクリックで開閉」 ・「１つだけ展開し後はたたむのではなく、展開したものは閉じる操作をするまで展開している」 というように変換したいと思っています。 （JavaScript等、かなりの初心者です。できるだけ単純かつ分りやすい方法で作成したいと考えております。） お知恵を貸してください。 自分の要望に近いサンプルコードを探しましたが、コードが複雑で理解できず、皆さんへご質問している次第です。 ＝＝＝＝＝＝＝＝＝＝＝＝＝（以下、コード）＝＝＝＝＝＝＝＝＝＝＝＝＝ <html> <head> <title>ページの名前</title> <script> window.onload=function(){ setNavi(); hideNavi(); } 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; } } function hideNavi(){ var n=document.getElementById("navi").firstChild; while(n){ if(n.nodeName=="LI") n.className="hide"; n=n.nextSibling; } } function disp() { var pp=this.parentNode.parentNode; var flg=pp.className=="hide"; hideNavi(); pp.className=flg?"":"hide"; return false; } </script> <style> #navi,#navi ul{ margin:0px; padding:0px; list-style:none; } #navi li.hide ul{ display:none; } </style> </head> <body> <ul id="navi"> <li> <div><a href="#">☆★☆スパゲッティー☆★☆</a></div> <ul> <li><a href="http://～">・カルボナーラ</a></li> <li><a href="http://～">・ペスカトーレ</a></li> <li><a href="http://～">・ペペロンチーノ</a></li> </ul> </li> <li> <div><a href="#">☆★☆どんぶり☆★☆</</a></div> <ul> <li><a href="http://～">・親子丼</a></li> <li><a href="http://～">・カツ丼</a></li> <li><a href="http://～">・天丼</a></li> </ul> </li> <li> <div><a href="#">☆★☆ファーストフード☆★☆</div> <ul> <li><a href="http://～">・ハンバーガー</a></li> <li><a href="http://～">・ホットドッグ</a></li> <li><a href="http://～">・フライドポテト</a></li> </ul> </li> </ul> </body> </html> ===============＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ よろしくお願いいたします。
- 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(); 頑張って下さい！
関連するQ&A
- active状態のリンクのみを他の画像に置き換える方法
いつもお世話になっております。 下記のｊｓの記述で、リンクをクリックするとcssで指定した画像になるようにし、他の範囲内のリンクをクリックしない限りその画像のまま、という状態にしています。(ul id="jmenu"という形で指定しています) 今回は、 <h1>link</h1> <ul id="jmenu"> <li><a href="...">（´・ω・｀）</li> </ul> <h1>wonder</h1> <iframe src="..."></iframe> <h1>quest</h1> <ul id="jmenu"> <li><a href="...">（´；ω；｀）</li> </ul> という形で、（´・ω・｀）をクリックした後、 （´；ω；｀）クリックで（´・ω・｀）をクリックしている状態を クリアにしたい、と考えているのですが、どのような記述が足りないのでしょうか？ 現在ですと、（´・ω・｀）がクリアされないため、 （´・ω・｀）（´；ω；｀）ともにクリックされている状態 （画像が変わっている状態）になってしまっています。 ご教授いただけますと、幸いです。よろしくお願いします。 window.onload=function(){ setColor(); } function setColor(){ var menu=document.getElementById("jmenu"); var tags=menu.getElementsByTagName("a"); for (var i=0;i<tags.length;i++){ tags[i].onclick=function(){ var pp=this.parentNode.parentNode; var tags=pp.getElementsByTagName("a"); for (var i=0;i<tags.length;i++){ tags[i].className=""; } this.className="foge"; } } }
- ベストアンサー
- JavaScript
- javascriptとCSSを使ってのドロップダウンメニュー作成
CSSとJavaScriptを使って ドロップダウンメニューを作ろうと思っているのですが JavaScriptがうまく作動していないためか FireFoxでは表示されるのですが IE6では動きません。 ご教授お願い致します。 ■index.html <head> <script src="javascript/menu.js" type="text/javascript"></script> </head> <div id="nav"> <ul> <li id="category"><a href="～">category</a> <ul> <li><a href="～">Overview</a></li> <li><a href="～">Overview</a></li> </ul> <ul> <li id="category"><a href="～">category</a> <ul> <li><a href="～">Overview</a></li> <li><a href="～">Overview</a></li> </ul> </div> ■menu.js function menuHover() {var menuItems = d.getElementById("nav").getElementsByTagName("li"); for (var i = 0, miL = menuItems.length; i < miL; i++) { menuItems[i].onmouseover = function() { this.className = "mnhover"; } menuItems[i].onmouseout = function() { this.className = ""; } window.onload = menuHover();
- 締切済み
- JavaScript
- クリックしたリンクの色を保持して、<object>にそのリンクを表示させる
下記のプログラムは、クリックしたリンクの色を保持して、<object>にそのリンクを表示させるようになっています。 プログラムの流れは、 （１）test1のリンクをクリックする （２）test1の背景を黄色/文字を太文字に変更 （３）<div id="objarea">にtest1のリンクを表示 （４）次のリンク（test2）がクリックされるまで（２）を保持。クリックされたらtest2のリンクの背景を黄色/文字を太文字に変更。 （５）（１）～（４）の繰り返し。 をすると言う、感じです。ですが、「（３）の<div id="objarea">にtest1のリンクを表示」と言う動作ができなく、リンクの色の保持しか動作しません。 どこがいけないのか分からなくて困っています。どうぞよろしくお願いします。 [サンプルプログラム] <style type="text/css"> <!-- .object { width: 400px; height: 400px; border: 1px solid #000000; } #menu a{ color:#0000ff; text-decoration:none; } #menu .hoge{ color:#ff0000; background-Color:#ffff00; font-weight:bold; } --> </style> <script type="text/javascript"> <!-- function changeObj(url){ document.getElementById('objarea').innerHTML = '<object data="' + url + '" type="text/html"><\/object>'; } //--> </script> <script type="text/javascript"> <!-- window.onload=function(){ setColor(); } function setColor(){ var menu=document.getElementById("menu"); var tags=menu.getElementsByTagName("a"); for (var i=0;i<tags.length;i++){ tags[i].onclick=function(){ var pp=this.parentNode.parentNode; var tags=pp.getElementsByTagName("a"); for (var i=0;i<tags.length;i++){ tags[i].className=""; } this.className="hoge"; } } } if (window.attachEvent){ window.attachEvent('onclick', setColor); window.attachEvent('onclick', changeObj); } else { window.addEventListener('onclick', setColor, false); window.addEventListener('onclick', changeObj, false); } //--> </script> </head> <body> <div id="objarea"> <object data="http://yahoo.co.jp" type="text/html"></object> </div> <ul id="menu"> <li><a href="#" onclick="changeObj('http://yahoo.co.jp'); return false;">test1</a></li> <li><a href="#" onclick="changeObj('http://www.google.co.jp/'); return false;">test2</a></li> </ul> </body> </html>
- ベストアンサー
- JavaScript
- 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の子カテゴリーが表示されます。 困っています。教えてください。
- ベストアンサー
- JavaScript
- オンマウスで表示されるテキスト
先ほどhttp://okwave.jp/qa4091921.htmlで質問させて頂いた者です。 下記のソースコードをお教え頂いたのですが、初めてページを開いた 時に↓の部分がすでに表示されている状態にするには、どうしたらよ いのでしょうか？ どうぞよろしくお願い致します。 ページを開いたときに表示していたい部分 -------------------------------------------- <ul class="hide" id="sub1"> <li>親メニュー1のサブメニュー1 <li>親メニュー1のサブメニュー2 <li>親メニュー1のサブメニュー3 <li>親メニュー1のサブメニュー4 </ul> -------------------------------------------- 教えて頂いたソースコード <style> .hide{ display:none; } </style> <script> function show(id){ var obj=document.getElementById(id); var n=obj.parentNode.firstChild; while(n){ if(n.nodeName=="UL") n.className="hide"; n=n.nextSibling; } obj.className=""; } </script> <ul> <li><a href="#" onMouseover="show('sub1')">親メニュー1</a></li> <li><a href="#" onMouseover="show('sub2')">親メニュー2</a></li> <li><a href="#" onMouseover="show('sub3')">親メニュー3</a></li> <li><a href="#" onMouseover="show('sub4')">親メニュー4</a></li> </ul> <hr> <div> <ul class="hide" id="sub1"> <li>親メニュー1のサブメニュー1 <li>親メニュー1のサブメニュー2 <li>親メニュー1のサブメニュー3 <li>親メニュー1のサブメニュー4 </ul> <ul class="hide" id="sub2"> <li>親メニュー2のサブメニュー1 <li>親メニュー2のサブメニュー2 <li>親メニュー2のサブメニュー3 <li>親メニュー2のサブメニュー4 </ul> <ul class="hide" id="sub3"> <li>親メニュー3のサブメニュー1 <li>親メニュー3のサブメニュー2 <li>親メニュー3のサブメニュー3 <li>親メニュー3のサブメニュー4 </ul> <ul class="hide" id="sub4"> <li>親メニュー4のサブメニュー1 <li>親メニュー4のサブメニュー2 <li>親メニュー4のサブメニュー3 <li>親メニュー4のサブメニュー4 </ul> </div>
- ベストアンサー
- JavaScript
- ＮＮでだけリストの一番上の項目がずれます。
IE、Opera、Firefox では問題なく表示されますが、Netscapeでだけ、リストの最初の項目の位置がずれます。 どうやら、ＣＳＳの li {margin: 0; padding: 4px;} が反映されていないようです。 <div id="xxx"><a name="aaa" /> <!-- Menu --> <div class="navi"> <ul> <li><a href="#aaa">ホーム</a></li> <li><a href="#bbb">あいう</a></li> <li><a href="#ccc">えおか</a></li> </ul> </div> <!-- Content --> <div class="content">中身</div> </div> 「ホーム」がずれます。 正しく反映させる方法はありますでしょうか？
- ベストアンサー
- ブログ
- 常にひとつだけ詳細表示する！の回答なのだけれど
<html> <head> <style> .show {display:block;} .hide {display:none;} </style> <script> function yomu(n){ oj=document.getElementById('a').getElementsByTagName('DIV'); for(var i in oj) oj[i].className=(i==n)?'show':'hide'; } </script> </head> <body> <div id="a"> <a href="#" onClick="yomu(0)">A</a><br> <div class="hide">Aの詳細</div> <a href="#" onClick="yomu(1)">B</a><br> <div class="hide">Bの詳細</div> <a href="#" onClick="yomu(2)" >C</a><br> <div class="hide">Cの詳細</div> </div> </body> </html>
- 締切済み
- JavaScript
- クリックしたら文章が入れ替わるjQuery
クリックしたら文章が入れ替わるjQuery http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/ 上記のサイトを参考につくっています。 タブではないのですが、添付画像のように数字部分を押すと中央部分の文章が入れ替わるというものです。 1と2の部分は押すと文章が入れ替わり、3を押すと違うページに飛ぶようにしようと思っています。 3のページにも同じ1～3のナビを置き、3から1、3から2にも飛ぶようにしたいのですが、このjsのままだと2を押しても1の内容が表示されてしまいます。 それを変更したいのと、 1か2がactiveの時に今どっちの内容を表示しているかわかるように色を変えたいのですが、変わりませんでした。 （サンプルだとちゃんとタブが切り替わっているようにみえるのでそのようにしたい。） 以下私のコードです。 ■■■■■■■■■■■■HTML■■■■■■■■■■■■ <div id="nav"> <ul> <li class="tabs"><a href="#1" >1</a></li> <li class="tabs"><a href="#2">2</a></li> <li><a href="3.html">3</a></li> </ul> </div> <div class="container"> <div id="1" class="content"> １の文章 </div> <div id="2" class="content"> ２の文章 </div> </div> ■■■■■■■■■■■■js■■■■■■■■■■■■ $(document).ready(function() { $(".content").hide(); $("li.tabs:first").addClass("active").show(); $(".content:first").show(); //On Click Event $("li.tabs").click(function() { $("li.tabs").removeClass("active"); $(this).addClass("active"); $(".content").hide(); var activeTab = $(this).find("a").attr("href"); $(activeTab).fadeIn(); return false; }); }); ■■■■■■■■■■■■CSS■■■■■■■■■■■■ #nav li a{ color:#8D8D8D; text-shadow: 0px 0px 3px #fff; } #nav li a:hover{ color:#8D8D8D; text-shadow: 1px 1px 0px rgba(0,0,0,0.8); } li.tabs active{ ←ここが変？ color:#8D8D8D; } ド素人の上説明も下手で申し訳ありませんが、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- アコーディオンパネルで複数のリンクを展開する方法
こんばんわ。Jquery超初心者です。 Jqueryでアコーディオンパネルを実装しようとしているのですが、Jqueryの指定に問題があるようで、 開きません。以下コードです。 (HTML) <ul class="slide"> <li><a href="">窓口業務</a> <ul> <li><a href="">menu 1-1</a></li> <li><a href="">menu 1-2</a></li> <li><a href="">menu 1-3</a></li> </ul> </li> <li><a href="">異動業務</a> <ul> <li><a href="">menu 2-1</a></li> <li><a href="">menu 2-2</a></li> <li><a href="">menu 2-3</a></li> </ul> </li> <li><a href="">検針業務</a> <ul> <li><a href="">menu 3-1</a></li> <li><a href="">menu 3-2</a></li> <li><a href="">menu 3-3</a></li> </ul> </li> <li><a href="">調定業務</a> <ul> <li><a href="">menu 4-1</a></li> <li><a href="">menu 4-2</a></li> <li><a href="">menu 4-3</a></li> </ul> </li> </ul> (JQuery) $(function () { $("ul.slide li ul").hide(); $("ul.slide li").click(function () { $("ul.slide li").each(function () { if ($("ul.slide li").css("display")=="none"){ $("ul.slide li ul"). slideDown(); } else { $("ul.slide li ul").slideUp(); } }); }); }); eachの使い方が間違っているのか、はたまた何か足りない記述があるのか、途方に暮れています。 何かお気づきの方、ご指摘の程宜しくお願い致します。
- ベストアンサー
- JavaScript
- Jqueryでリストのスクロール
<ul><li></li></ul>にて作成したリストで選択した行の背景色を変更し、選択した行が リストの先頭にスクロールするするサンプルを試しに作成してみました。 Jqueryを使用して下記のように作成してみましたが選択行がリストの先頭にうまくスクロールしずに 微妙な位置までスクロールして止まってしまいます。うまくリストの先頭に来るようにスクロールさせる にはどのようにすればよろしいでしょうか。 【サンプル】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("ul.update-scroll li").click(function() { $("ul.update-scroll li").each(function(){ // 既に選択済の場合、選択を解除 if( $(this).hasClass("selected") ) { //alert( $(this).text() ); $(this).toggleClass("selected"); } }); // 選択済に変更 $(this).toggleClass("selected"); // 選択済の位置がリストの先頭に来るようにスクロール //var i = $(this).index(); var p = $(this).offset().top; //alert(p); $("ul.update-scroll").animate({ scrollTop: p }, "fast"); }); }); </script> <title>CSS</title> <style type="text/css"> ul.update-scroll { list-style-type: none; width: 400px; height: 100px; overflow-y: scroll; border: 2px solid #bbb; padding-left: 1.5em; } ul.update-scroll li { margin-top: 0.3em; } ul.update-scroll li.selected { background:red; } ul.update-scroll a { text-decoration: none; } </style> </head> <body bgcolor="rgba(255,0,0,0.15)"> <ul class="update-scroll"> <li>[2010/01/03]： <a href="javascript:void(0);">項目10</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目9</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目8</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目7</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目6</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目5</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目4</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目3</a></li> <li>[2010/01/02]： <a href="javascript:void(0);">項目2</a></li> <li>[2010/01/01]： <a href="javascript:void(0);">項目1</a></li> </ul> </body> </html>
- ベストアンサー
- JavaScript
お礼
修正方法をご教示いただきまして、ありがとうございます。 また、詳細な解説をつけていただき、大変助かりました。 あせらず、１つ１つコメントをつけながら読み解いて行けば良いのですね。 本当にありがとうございました。