• 締切済み

ページ内リンクでアコーディオンメニューを開くには？

ネットでやり方を調べたのですが、ちゃんとした回答がないようなので質問します。 http://harapeko.wktk.so/blog/blog-web/js-blog-web/2013-02-18/1058 要するに上記のリンクの内容を一つのページ内でやりたいだけなのです。 上部のナビのボタンを押すとずいーっとページ内リンクで下の方に飛んでその項目のアコーディオンメニューが開いて収納されていたコンテンツが出るというような。 上記のリンクの内容をそのまま同じページの中でリンク先だけ変えてやったのですが、うまくできません。飛び先が違うページに飛ぶなら大丈夫なのですが。 自分は初心者なので分かりやすく教えてください。お願いします。

みんなの回答

回答No.1

やりたい事はこういうことですかね。 http://getbootstrap.com/javascript/#collapse-examples

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

関連するQ&A

  • アコーディオンメニューをアンカーリンクで開く

    アコーディオンメニューで困っています。 色々と調べているのですが、どうもうまく動きません。 ■やりたい事 アコーディオンメニューを使っていますが、同じページからのアンカーリンク、そして別ページからのアンカーリンクで飛んできた際に、隠れているアコーディオンを開いて表示した。 ■現状 ・アンカーリンク(A.html)-------------------- <a href="B.html#アンカー名">リンク</a> ・アコーディオン設置先(B.html)------------------ <div class="aaa" id="アンカー名"> <p class="title"> アコーディオンタイトル </p> <p class="bbb"> アコーディオンの内容表示 </p> </div> ・js--------------------------------------- $(document).ready(function(){ $(".bbb").hide(); $(".title").click(function(){ $(this).toggleClass("active").next().slideToggle("slow"); $(location.hash).next(".bbb").slideToggle("slow"); }); }); 現状はこのような状態なのですが、アンカーでの動作をしてくれません。 分かる方いらっしゃいましたら、是非教えてください

  • アコーディオンメニューの記述

    スマホ用のホームページを作成している素人です。 ページ内にアコーディオンメニューを入れたいと思っています。 http://triplexxx.jp/archives/150 上記のサイトを参考に1段のメニューは作れました。 もう1段追加して2段にしたいのですが、html、ｃｓｓ、ｊｓ それぞれどうやって記述したらいいかわかりません。 「アコーディオンメニュー 2段」で検索してみたのですが、上記参考ページと全然違うので私には理解できませんでした。 htmlのみ<ul>～</ul>を入れ子にしてみましたがうまくいきません。 どの部分にどういった記述を加えればいいのでしょうか？

    • 締切済み
    • CSS
  • アコーディオンメニューの開閉制御

    私webデザイナーをしています。 アコーディオンメニューで（開くのは１つのパネルのみ）ページ遷移してもアコーディオンの開いている部分が閉じないものを作りたいと思っています。 しかし、下記のコードでどうしても実装できません。 技術のある方、間違いを教えていただけないでしょうか？ 【ｈｔｍｌ】 <dl class="accordion_dl"> <dt>アコーディオンメニュー.1</dt> <dd>アコーディオンメニュー.1のテキスト表示</dd> <dt>アコーディオンメニュー.2</dt> <dd>アコーディオンメニュー.2のテキスト表示</dd> <dt>アコーディオンメニュー.3</dt> <dd>アコーディオンメニュー.3のテキスト表示</dd> <dt>アコーディオンメニュー.4</dt> <dd> <ul> <li>リスト挿入</li> <li>リスト挿入</li> <li>リスト挿入</li> <li>リスト挿入</li> </ul> </dd> </dl> 【JS】 jQueryとjquery.cookie.jsを読み込んでいます。 for (var i=0; i < $(".accordion_dl dt").length; i++) { if( $.cookie("accord" + i) == "open" ) { $(".accordion_dl dt").eq(i).next("dd").show(); } } $('.accordion_dl dt').click(function(){ $(this).toggleClass("open"); $(this).siblings("dt").removeClass("open"); $(this).next("dd").slideToggle(); $(this).next("dd").siblings("dd").slideUp(); n = $(".accordion_dl dt").index(this); if ($.cookie("accord" + n) == "open") { $.cookie("accord"+n,"close", {path:"/"}); } else { $.cookie("accord"+n,"open", {path:"/"}); } }); よろしくお願いいたします。

  • javascriptのアコーディオンメニューについ

    アコーディオンナビゲーションの作成しておりましたがfirefoxでは問題なく反映されるのですが IEで見るとtop,bottom,leftの三方に枠みたいなものが出てしまいます。原因がわからず困っています。誰かわかる方いらっしゃったらご回答お願い致します。 ※IEの画像データを添付しております。 ※jsはhttp://lab.komadoya.com/blog/2008/08/waterfall-js.phpよりダウンロードしました。 【CSS】 *{ margin:0; padding:0; } h1{ margin:30px 0; font-size:150%; } h2{ margin-bottom:3px; font-size:125%; color:#9ac1c9; } #contents{ margin-bottom:20px; } #localNav{ float: left; width: 180px; } #alphaBlock{ float:left; width:590px; margin-top:20px; } #footer{ margin-bottom:5px; padding-top:5px; border-top:1px solid #000; } #footer address{ font-style:normal; font-size:87.5%; text-align:center; } /*-------------------- accordion --------------------*/ .accordionBox{ width: 180px; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 73%; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } .accordion{ width:180px; } .accordion dt{ width:180px; border-top:none; font-weight:bold; cursor:pointer; } .accordion dd{ overflow:hidden; display:none; background:#FFF; } .accordion ul{ width:180px; list-style:none; border-top:none; } .accordion a, .accordion a:active, .accordion a:visited{ display:block; color:#333; text-decoration:none; background:#eaf0f2; width:180px; } .accordion a:hover{ background-color:#d9e1e4; color:#000; } /*-------------------- float clear --------------------*/ #contents, .dropdownBox, .accordionBox, .clearFix{ overflow:hidden; } #contents:after, .dropdownBox:after, .accordionBox:after, .clearFix:after{ content:""; display:block; clear:both; height:0px; overflow:hidden; } /*\*/ * html #contents, * html .dropdownBox, * html .accordionBox, * html .clearFix{ height:1em; overflow:visible; } /**/ /* or */ .clear{ clear:both; } 【html】(一部) <dl class="accordion" title="eight"> <dt id="ddheader-eight"><a href="A"><img src="images/common/left_nav_04.gif" width="180" height="40"></a></dt> <dd id="ddcontent-eight"> <ul> <li><a href="a">お茶</a></li> <li><a href="b">酢</a></li> <li><a href="c">滋養強壮・栄養ドリンク</a></li> </ul> </dd> </dl> <dl class="accordion" title="nine"> <dt id="ddheader-nine"><a href="B"><img src="images/common/left_nav_05.gif" width="180" height="40"></a></dt> <dd id="ddcontent-nine"> <ul> <li><a href="a" target="_top">シェイク・ドリンク</a></li> <li><a href="b">代替食</a></li> <li><a href="c">サプリメント</a></li> <li><a href="d">ダイエットインナー・ウェア</a></li> <li><a href="e">甘味料</a></li> </ul> </dd> </dl>

    • ベストアンサー
    • CSS
  • 楽天のお手軽ジャンルで3000ページの被リンク

    お手軽ジャンルは被リンクを得られて手軽に作れるので エントリーページ3000ページ以上作って、お手軽アフィをジャンルごとに紹介しました。 最初はインデックスされてたのですが、リンクをいっぱい張ったからなのか、コンテンツが少ないのか。 3000ページインデックスされなくなりました。しかし、被リンクとしてはやくにたっているような・・。 ウェブマスターでも3000のrakutenドメインから被リンクを受けています。 このまま3000の被リンクをもっていてもスパム扱いされてしまうかもしれないので、 3000ページ全部削除しようかと思います。そしてオリジナルのコンテンツを作ろうと思うのですが 3000の被リンクを一気にはずしても問題ないのでしょうか？

    • 締切済み
    • SEO
  • アコーディオンメニュー 開いたまま動かない

    アコーディオンメニューを設置したく検索をかけサンプルを入手、手直ししながら設置を試みるのですが、サンプルからして「JavaScriptの記述後 bodyが表示されない」、「親メニューはOKだがサブメニューが開かない」などなど、もう手詰まり状態です。 二日かかって下記 URLまでたどり着き正常な位置にきれいに並ぶのですが、私の作っているページ内ではメニューが開いたままの状態です。 http://d.hatena.ne.jp/takahashijunko/20120202/1328189955 「DOCTYPE宣言」、「@charset "UTF-8」の違いなどで私のページ（以下に記述）で使うことは無理なのでしょうか、それとも私はまったく勘違いをしているのでしょうか？ アコーディオンメニューを使える道があるならばご教授ください。 --------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>○○○○○</title> <meta name="description" content="○,○,○,○,"> <meta name="keywords" content="○,○,○,○,,"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css"> <link rel="stylesheet" href="style2.css" type="text/css"> <script type="text/javascript" src="js/jquery-1.6.min.js"></script> ・・・・URL先コピペの為省略・・・・ </script> </head> XP Chrom - IE8 - Firefox3.6 にて検証 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 固定フレームのついたフレームページにリンクするには？

    メモ帳でホームページを作っています。初心者です。 メニューページにはフレームを使わず、 コンテンツ用ページを二つのフレームを使って、上部に各コンテントファイル、下部にメニュー（各コンテント名を一覧表示）が表示されるようにしています。下部フレームは固定フレームにしたいと思っています。 メニューページで各コンテント名をクリックしたとき、 上部にそのコンテントファイル、下部に固定メニューファイルの表示されたフレームページへリンクさせたいのですが、この方法がわかりません。 初めは、フレームページにアドレスを付けてリンクすればいいのよねー、と試みたのですが、そうすると全てのフレームページ、つまり上部フレームにそれぞれのコンテンツファイルが表示され、下部にメニューファイルが表示されたフレームページのひとつひとつにアドレスをつけないと、リンクできないのでは？と疑問がわきました。 しかし、それではフレームページの固定メニューファイルの各コンテント名をクリックしたときに、上部フレームにはコンテンツファイルのみでなく、各コンテンツのフレームページが表示されてしまい、下部の固定フレームが増えていって（泣）変なことになってしまいますよね。 フレームページ間のリンクは、その固定フレームの各コンテント名のtargetを上部フレーム名にすればよいので問題ないのですが・・・。 メニューページもフレームページにすれば解決するでしょって感じですが^_^;、メニューページには各コンテント名が載せてあるのに下にも同じ項目を並べるのはくどい気がして、ちょっと・・・と思いまして。 ご存知の方よろしくお願いします！

    • ベストアンサー
    • CSS
  • jQueryアコーディオンでリストウィジェット表示

    jQuery UI Accordionというjavascriptを使用しているのですが、Twitterのリストウィジェットを入れるとウィジェット内のリンクが機能しなくなってしまいます。 どのようにしたら良いでしょうか。 http://jqueryui.com/demos/accordion/ 上記のサイトの一番上にあるアコーディオンを使いました。 下記のページをiframeで表示しています。 http://www.seraphen.com/ff14/accordion.html

  • アコーディンパネルの別ページからのリンクについて

    こんばんは。 jqueryを使ってアコーディオンパネルを実装したページを作成しました。 通常は全て閉じた状態ですが、 全てのページにパネル１～5へのリンクがあり、それをクリックすると該当のパネルが開いた状態で表示させるには、どんなスクリプトを追加するとよろしいのでしょうか？ 以下コードです。 --html（各ページのリンクの部分） <ul> <li><a href="/service/#panel01">パネル１へ</a></li> <li><a href="/service/#panel02">パネル２へ</a></li> ・・・ </ul> --html（アコーディオンパネルの部分 /service/index.html ） <h5 class="trigger" id="panel01"><a href="#">パネル1のタイトル</a></h5> <div class="accblock"> <p>パネル１のコンテンツ</p> </div> <h5 class="trigger"　id="panel02"><a href="#">パネル2のタイトル</a></h5> <div class="accblock"> <p>パネル2のコンテンツ</p> </div> （省略） ---js $(document).ready(function(){ $(".accblock").hide(); $("h5.trigger").click(function(){ $(this).toggleClass("active").next().slideToggle("slow"); }); }); location　href　か hash　を使うのかなと思っているのですが うまく使いこなすことができませんでした。 アドバイスをいただけたら助かります。 どうぞよろしくお願いいたします。

  • jQuery UI accordionの改造

    jQueryについて質問させていただきます。 ただいま、jQuery UIのアコーディオンのプラグインを用いてWebサイトを制作しているのですが、このプログラムを少々改造したいと考えています。 行わせたいアクションは、jQuery UIを反映させたナビゲーション（video, photo, illust, text, contact　といった具合にカテゴリーを設けています）に置かれているリンクをクリックした際に、そのリンク部分（例えば、videoというカテゴリーを選択したときにはvideoというコンテンツ名）とアコーディオン内に格納されている内容を上に向かってアニメーションさせる、といったものです。 浅学なうえ、javascriptやactionscriptなどのプログラミングが非常に苦手で手詰まりの状態です。 拙い説明ではございますが、よろしければ皆さまならどのように解決するかを教えていただけませんでしょうか？ よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する