スマートフォン用サイトのアコーディオンメニュー作成方法

前へ 次へ
このQ&Aのポイント
  • スマートフォン用サイトのアコーディオンメニューを作成する方法について解説します。
  • アコーディオンメニューは、スマートフォン用サイトにおいてメニューの表示をコンパクトにするための便利な機能です。
  • 以下のコードを参考にして、アコーディオンメニューを実装することができます。
回答を見る
  • ベストアンサー

スマートフォン用サイトのアコーディオンメニュー

スマートフォン用サイトのアコーディオンメニューを作成しています。 http://html-five.jp/140/ こちらのサイト様の情報をもとに2段のメニューが作ろうと思ったのですが、 空白のページが表示されてしまいますが、どこを修正したらよいのかわかりません。 記述したものは下記のとおりです。 解答よろしくお願いいたします。 <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> </head> <body> <script type="text/javascript"> $(".accordion p").click(function(){ $(this).next("ul").slideToggle(); $(this).children("span").toggleClass("open"); }); </script> <div> <ul> <li> <p><span>LIST 6</span></p> <ul> <li> <p><span>LIST 6-1</span></p> <ul> <li><a href="page01.html">LIST 6-1-1</a></li> <li><a href="page01.html">LIST 6-1-2</a></li> <li><a href="page01.html">LIST 6-1-3</a></li> </ul> </li> <li> <p><span>LIST 6-2</span></p> <ul> <li><a href="page01.html">LIST 6-2-1</a></li> <li><a href="page01.html">LIST 6-2-2</a></li> <li><a href="page01.html">LIST 6-2-3</a></li> </ul> </li> <li> <a href="page01.html">LIST 6-3 (not to open)</a> </li> </ul> </li> <li> <p><span>LIST 7</span></p> <ul> <li> <p><span>LIST 7-1</span></p> <ul> <li><a href="page01.html">LIST 7-1-1</a></li> <li><a href="page01.html">LIST 7-1-2</a></li> <li><a href="page01.html">LIST 7-1-3</a></li> </ul> </li> <li> <p><span>LIST 7-2</span></p> <ul> <li><a href="page01.html">LIST 7-2-1</a></li> <li><a href="page01.html">LIST 7-2-2</a></li> <li><a href="page01.html">LIST 7-2-3</a></li> </ul> </li> <li> <p><span>LIST 7-3</span></p> <ul> <li><a href="page01.html">LIST 7-3-1</a></li> <li><a href="page01.html">LIST 7-3-2</a></li> <li><a href="page01.html">LIST 7-3-3</a></li> </ul> </li> </ul> </li> </ul> </div> </body>

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

<script type="text/javascript"> $(".accordion p").click(function(){ $(this).next("ul").slideToggle(); $(this).children("span").toggleClass("open"); }); </script> → <script type="text/javascript"> $(function(){ $(".accordion p").click(function(){ $(this).next("ul").slideToggle(); $(this).children("span").toggleClass("open"); }); }); </script>

その他の回答 (1)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

スマホはまったくわかりませんが、ご質問の参考サイトは普通のブラウザと同様の内容になっているので… 以下の点を修正すれば多分動作すると想像します。 1）HTMLにclass="accordion"の要素がないので、設定してください。 2）スクリプトを実行する時にはまだ、ＨＴＭＬがパースされていないので、 　　1）を行なっても要素を認識できません。 　　スクリプトがレディ時に実行されるように、全体を 　　　　$(function(){ 　　　　　　//現在のスクリプト 　　　　}); 　　となるようにしてください。 ご提示のサイトに「デモ」がありますので、そちらのソースを見ればわかるかと思います。 http://html-five.jp/pc/demo/002/

crea0118
質問者

補足

回答ありがとうございます。 1)は理解できたのですが、 2)がよくわかりません。 　　　　$(function(){ 　　　　　　//現在のスクリプト 　　　　}); の現在のスクリプトの部分にはどのように記述したらよいのでしょうか？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jQueryアコーディオンで複数メニューを開きたい

    jQueryで開閉式（アコーディオン）の縦メニューを作りました。 http://www1.m.jcnnet.jp/minato01/demo/j-menu/ このメニューで、以下の２点の仕様を追加希望です。 １.　「メニュー１」「メニュー２」を最初から開いた状態で表示したい ２.できれば、ページ移動した場合、前の開いた内容を記憶させたい（cookieでOK） 特に「１」は必須事項です。 色々検索してみましたが、方法が色々あっても すべて満たす方法が見つかりません。 ソースは以下の通りです。 -------------------- html -------------------- <span>メニュー 1</span> <ul> <li><a href="#">メニュー 1-1</a></li> <li><a href="#">メニュー 1-2</a></li> <li><a href="#">メニュー 1-3</a></li> </ul> <span>メニュー 2</span> <ul> <li><a href="#">メニュー 2-1</a></li> <li><a href="#">メニュー 2-2</a></li> <li><a href="#">メニュー 2-3</a></li> </ul> <span>メニュー 3</span> <ul> <li><a href="#">メニュー 3-1</a></li> <li><a href="#">メニュー 3-2</a></li> <li><a href="#">メニュー 3-3</a></li> </ul> <span>メニュー 4</span> <ul> <li><a href="#">メニュー 4-1</a></li> <li><a href="#">メニュー 4-2</a></li> <li><a href="#">メニュー 4-3</a></li> </ul> -------------------- css -------------------- ul, li { text-indent: 0; list-style: none; } ul { display: none; } ul.selected { display: block; } span { margin-bottom:1px; padding: 8px 4px; display: block; cursor: pointer; border:1px solid #ccc; } span:before { padding: 0 8px 0 0; vertical-align: middle; content: url("img/bullet_arrow_right.png"); } span.selected:before { content: url("img/bullet_arrow_down.png"); } span:hover,li:hover { background: #f3f3f3; } -------------------- js -------------------- $(function() { $('<img>').attr('src', 'img/bullet_arrow_down.png'); $('span').click(function() { $(this).next('ul').slideToggle('fast'); $(this).toggleClass('selected'); }); }); ※jQueryは「jquery-1.9.0.min.js」を読み込んでいます。 -------------------- 参考サイトは以下のサイトです。 http://php.o0o0.jp/article/4138817358715040 分かる方、ぜひ具体的にどこをどう修正したらよいか 詳しく教えていただければ幸いです。 どうぞよろしくお願いいたします。

  • jQuery多層式アコーディオンメニューについて。

    javascript勉強中です。 jQueryを使っての多層式アコーディオンメニューですが、現在hoverでメニューが開く仕様になっています。 これをclickすることで開くようにするにはどうしたらいいか、アドバイスいただければ幸いです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('ul.main li').hover(function(){ $('>ul:not(:animated)',this).slideDown('fast') },function(){ $('>ul',this).slideUp('fast'); }); }); </script> <style> ul.sub, ul.sub ul.sub{display:none;} </style> </head> <body> <ul class="main clearfix"> <li><a href="#">メニュー1</a> <ul class="sub"> <li><a href="#">サブ1-1</a> <ul class="sub"> <li><a href="#">サブ1A-1</a></li> </ul> </li> <li><a href="#">サブ1-2</a></li> </ul> </li> <li><a href="#">メニュー2</a> <ul class="sub"> <li><a href="#">サブ1-1</a> <ul class="sub"> <li><a href="#">サブ1A-1</a></li> </ul> </li> <li><a href="#">サブ1-2</a></li> </ul> </li> </ul> </body> </html> 何卒宜しくお願い申し上げます。

  • jQuery アコーディオンメニューについて

    jQuery アコーディオンメニューについていくつか質問させていただきます。 当方、はじめてjQueryを使っています。 以下のページを参考にアコーディオンメニューを作成しています。 http://triplexxx.jp/archives/150 <ul class="acc"> <li><a href="1" class="open">category1</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> <ul class="fxmn"> 　　　　 <li><a href="#>menu1-3-1</a></li> <li><a href="#">menu1-3-2</a></li> <li><a href="#">menu1-3-3</a></li> </ul> </li> 　</ul> </li> <li><a href="2" class="open">category2</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="3" class="open">category3</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> <li><a href="#">menu 3-4</a></li> </ul> </li> </ul> var $j = jQuery; $j(function(){ $j(".acc").each(function(){ $j("a.open", this).each(function(index){ var $this = $j(this); if(index !=n) $this.next().hide(); $this.click(function(){ var params = {height:"toggle",opacity:"toggle"}; $j(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); return false; }); }); }); }); (1)：具体的にあげますと、上記のmenu1-3をクリックしてmenu1-3-1、1-3-2、1-3-3のアコーディオン　　を開き、 　　1-3-1をクリックしてリンク先に飛んだ際に、直前に開いていたアコーディオンをそのままの状態　　　にしておきたいというものです。 （↓こんな感じです） category1 ・　menu 1-1 ・　menu 1-2 ・　menu 1-3 ・・　menu1-3-1 ・・　menu1-3-2 ・・　menu1-3-3 category2 category3 教えて！gooの過去の質問を参考させていただきながら、 if(index !=n) $this.next().hide();　　 で、　n　を指定することで、それぞれのサブメニューを開いた状態にすることには成功したのですが、その下の階層のメニューをどのように指定すればよいかがわかりません。 (2)：また、リンク先のページに飛んだ時に、アコーディオン部分は動かないのが望ましいのですが、 　　可能でしょうか？ 　　（タブのようにページが切り替わる感じが理想的ですが、ページ数が大変多いため難しいとおもっ　　ています） (3)：(1)、(2)はページごとにscriptを書き換えるのではなく、htmlをいじることで（li タグにclass指定をす　　　るなど）変更するのは可能でしょうか？ 　　外部scriptが使えればと思っています。 複数の質問になりましたが、どうぞよろしくお願いいたします。

  • jquery.mobile　画像を中央に表示

    <!DOCTYPE html> <html lang="ja"> <head> <title>test</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"> </script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"> </script> </head> <body> <div id="home" data-role="page" data-theme="d"> <ul data-role="listview" data-dividertheme="a"> <li data-role="list-divider">test </li> <li> <a href="#"> <img src="C:\1.jpg"> test </a> </li> <li> <a href="#"> <img src="C:\2.jpg"> test </a> </li> </ul> </div> </body> </html> ------------------------- 上記のようなコードで携帯サイトを構築しているのですが 正方形ではない画像が、右上に寄ってしまうのですが これを回避する方法はありますか？ 例で言うのであれば 添付画像の黄色い四角を画像表示エリアの中央に表示させたいです。

    • ベストアンサー
    • HTML
  • H2にも色を付けたい、デザインを適用させたい

    http://blog.direct-search.jp/2010/10/jquery-mobile.html のサイトを参考にしたのですが、 <h2>test</h2> も　<h1>Header</h1> のように、 色を白にして背景を青にするデザインにするにはどうすればいいでしょうか？ 今は下記のコードのしていますが、 そうすると画像の様に、<h2>test</h2> は太字でtestになってしまいます。 <html> <head> <meta charset="utf-8"> <title>jQuery Mobile テスト</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head> <body> <section data-role="page" data-theme="b" id="ds-home"> <header data-role="header" data-theme="b"> <h1>Header</h1> </header><!-- /header --> <article data-role="content"> <div>This is a test page.</div> <h2>test</h2> <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> <li data-role="list-divider">Category</li> <li><a href="#ds-page-1">First Child</a></li> <li><a href="#ds-page-2">Second Child</a></li> </ul> <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> <li data-role="list-divider">Category 2</li> <li><a href="#ds-page-3">First Child 2</a></li> <li><a href="#ds-page-4">Second Child 2</a></li> </ul> </article><!-- /content --> <header data-role="footer" data-theme="b"> <h2>Footer</h2> </header><!-- /footer --> </section><!-- /page --> </body> </html>

    • ベストアンサー
    • HTML
  • jQueryで２段式アコーディオンメニュー

    いつも参考にさせて頂いております。 あるサイト様（http://triplexxx.jp/archives/150）を参考にjQueryで２段式のアコーディオンメニューを作成していましたが、何分初心者なもので早々に行き詰まってしまいました。 理想はこちらのサイト様（http://html-five.jp/pc/demo/002/）にあるデモの下側、『２段アコーディオン』をこちら（http://html-five.jp/demo/002/index2.html）の『ポンプ型アコーディオン』ような動きにしたいと思っております。 スクリプト自体を入れ子にしたりしてみましたが根本的な部分がダメなようでうまくいきませんでした。 何卒ご教授いただけますようお願いします。 [参考にしたjQuery（１段までは問題なく動きます）] script type="text/javascript"> var j$ = jQuery; j$(function(){ j$(".ac_parent").each(function(){ j$("li > a").each(function(index){ var $this = j$(this); if(index > 0) $this.next().hide(); $this.click(function(){ var params = {height:"toggle", opacity:"toggle"}; j$(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); return false; }); }); }); }); </script> [作成中のHTML] <div> <ul class="ac_parent"> <li><a href="#">1</a> <ul class="ac_child"> <li><a href="#">11</a></li> <ul class="ac_gchild"> <li><a href="#">111</a></li> <li><a href="#">112</a></li> <li><a href="#">113</a></li> </ul> <li><a href="#">12</a></li> <ul class="ac_gchild"> <li><a href="#">121</a></li> <li><a href="#">122</a></li> <li><a href="#">123</a></li> </ul> </ul> </li> <li><a href="#">2</a> <ul class="ac_child"> <li><a href="#">21</a></li> <ul class="ac_gchild"> <li><a href="#">211</a></li> <li><a href="#">212</a></li> <li><a href="#">213</a></li> </ul> <li><a href="#">22</a></li> <ul class="ac_gchild"> <li><a href="#">221</a></li> <li><a href="#">222</a></li> <li><a href="#">223</a></li> </ul> </ul> </li> <li><a href="#">3</a> <ul class="ac_child"> <li><a href="#">31</a></li> <ul class="ac_gchild"> <li><a href="#">311</a></li> <li><a href="#">312</a></li> <li><a href="#">313</a></li> </ul> <li><a href="#">32</a></li> <ul class="ac_gchild"> <li><a href="#">321</a></li> <li><a href="#">322</a></li> <li><a href="#">323</a></li> </ul> </ul> </li> </ul> </div>

  • jQueryのアコーディオンメニュー　開閉の制御

    jQueryのアコーディオンメニュー　開閉の制御 こちらの「jQueryでアコーディオンメニューを作成する」の記事を参考にして （http://triplexxx.jp/archives/150） アコーディオンメニューを設置しました。 ページ遷移後でも、常に一番目のメニューが開いている状態なので、 選択しているページのメニューだけを開いている状態にしたいのですが どの部分を変更したらよいでしょうか？ javascriptの if(index > 0) $this.next().hide(); の部分が開閉の指示をしている箇所かなと思うのですが 新しいコードを書ける知識がないので、教えてください。 よろしくお願いします。 html ---------------------- <ul class="acc"> <li><a href="1">category1</a> <ul class="fxmn"> <li><a href="11">menu 1-1</a></li> <li><a href="12">menu 1-2</a></li> <li><a href="13">menu 1-3</a></li> </ul> </li> <li><a href="2">category2</a> <ul class="fxmn"> <li><a href="21">menu 2-1</a></li> <li><a href="22">menu 2-2</a></li> <li><a href="23">menu 2-3</a></li> <li><a href="24">menu 2-4</a></li> </ul> </li> <li><a href="3">category3</a> <ul class="fxmn"> <li><a href="31">menu 3-1</a></li> <li><a href="32">menu 3-2</a></li> <li><a href="33">menu 3-3</a></li> <li><a href="34">menu 3-4</a></li> <li><a href="35">menu 3-5</a></li> </ul> </li> </ul> ---------------------- css ---------------------- ul.acc, ul.acc li ul { margin: 0; padding: 0; list-style: none; } ul.acc a{ display: block; height: 30px; line-height: 30px; color: #feffff; } ul.acc { background-color: #185AAC; } ul.acc li ul { background-color: #A6B5E2; } ---------------------- javascript ---------------------- var j$ = jQuery; j$(function(){ j$(".acc").each(function(){ j$("li > a", this).each(function(index){ var $this = j$(this); if(index > 0) $this.next().hide(); $this.click(function(){ var params = {height:"toggle", opacity:"toggle"}; j$(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); }); }); }); }); ----------------------

    • ベストアンサー
    • AJAX
  • 複数トリガーで動作するアコーディオンメニュー

    お世話になります。 シングルページでページ内リンクでコンテンツ移動するタイプのページ作成を現在やっているのですが、急に標題の内容の要望が急ぎ対応として来まして、困っております。 具体的に言うと、 通常アコーディオンメニューは、 隠してある部分の見出しなんかをトリガーにして、開閉して内容を表示・非表示させると思いますが、今回要望としてあるのは、 グローバルナビもそのトリガーにしたいということです。 グローバルナビをクリックすると、該当箇所に移動しつつ、普段見出しだけで内容が隠してあるものも展開されるということができればと思っております。 参考までにコードを記載しておきます。 js部分 //accordion $('#sub01 h4').click(function() { $(this).toggleClass("open").next("div").slideToggle(); }).next().hide(); // drop down $("#nav li.drop").hover(function() { $(this).children('ul').show(); }, function() { $(this).children('ul').hide(); }); }); <div id="nav"> <ul class="clear"> <li><a href="#menu1">メニュー１</a></li> <li class="drop"><a href="#menu2">メニュー２<span>▼</span></a> <!-- InstanceBeginEditable name="planList" --> <ul> <li><a href="#sub01">サブ1</a></li> <li><a href="#sub02">サブ2</a></li> </ul> <!-- InstanceEndEditable --> </li> <li><a href="#menu3">メニュー3</a></li> <li><a href="#menu4">メニュー4</a></li> </ul> </div> ------省略-------------- <div id="sub01" class="subcontent"> <h4><span>項目名</small></span></h4> <div class="sub01Inner clear"> 内容内容内容</div><!-- /planInner --> </div><!-- /planBox -->

  • アコーディオンパネルで複数のリンクを展開する方法

    こんばんわ。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の使い方が間違っているのか、はたまた何か足りない記述があるのか、途方に暮れています。 何かお気づきの方、ご指摘の程宜しくお願い致します。

  • 【JQuery】アコーディオンの入れ子について

    アコーディオンの入れ子（多階層）について、お教えください。 JQueryで入れ子のアコーディオンメニューを作成したいと思っています。 入れ子の数は計3つを予定してます。（第3階層まで） 1～3つ目それぞれのメニューは増減する可能性がある為、出来るだけ数字で割り振ったIDなどは使用せずに表現したいと思っています。（メニューを増やす度にIDが増えるのを止めたい） ■HTMLソース例 <ul class="navi"> <li>第1階層 <ul class="navi-sub"> <li>第2階層 <ul class="navi-sub2"> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> </ul> </li> <li>第2階層 <ul class="navi-sub2"> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> </ul> </li> </ul> </li> </ul> 上記のようなHTMLソースで入れ子のアコーディオンを作成することは可能でしょうか？ （ID、CLASSのセレクタの振り方は上記以外でもかまいません） また、最初からアコーディオンメニューの1部分だけ展開した状態にする事は可能なのでしょうか？ （上の質問にも言える事ですが、JavaScriptにこだわっている訳ではないので、CSSでも表現が可能であればCSSでも構いません） JavaScriptがよく分からない為、お教え頂けると大変助かります。 何卒宜しくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する