• 締切済み

bootstrapのcollapseの開閉について

bootstrapを使って、webページを作成してます。 アコーディオンパネル風に使うためにcollapseのタグを使用しておりますが、ページ移動後も開いたところだけ開きっぱなしに出来ないでしょうか。 サイドメニューの項目として使用したいので、是非教えていただきたいです。

noname#243511
noname#243511
  • HTML
  • 回答数2
  • ありがとう数3

みんなの回答

  • Proof4
  • ベストアンサー率78% (151/192)
回答No.2

No.1の補足コメントに回答します。 ソースコードの提示がないため具体的な回答はできません。あくまで概要をお伝えします。 '遷移元のページのなにが開かれたのかという情報を保持する方法'ですが、No.1の回答にある通り、cookieに値をセットしさえすればよいです。(調べればやり方はすぐに見つけられることでしょう) 例としてソースコードを以下に示します。参考にしてください。 <button type="button" id="test_id1" value="1">1</button> <button type="button" id="test_id2" value="2">2</button> <button type="button" id="test_id3" value="3">3</button> <button type="button" id="test_id4" value="4">4</button> <button type="button" id="test_id5" value="5">5</button> <a href="next_page.html">次のページへ</a> <script>  for(var i=0; i<5; i++){   num = i+1;   document.getElementById('test_id'+num).addEventListener('click', function(){    document.cookie = 'button=' + encodeURIComponent(this.value);   });  } </script> ボタンをクリックすると、押されたボタンのvalueがcookieに記録されます。 ※注意※ 1. このサイトの都合上、インデントを半角スペースで表現しています。検証の際は適宜置換してください。 2. Chromeの場合、ローカルではcookieを記録することができません。ローカルホストやサーバーにアップロードすると動作します。

noname#243511
質問者

お礼

教えていただきありがとうございます。Javascriptでcookieに値をセットをやったことないので、勉強します。

  • Proof4
  • ベストアンサー率78% (151/192)
回答No.1

開閉するdiv要素のclass、aria-expanded属性をそれぞれ class="collapse show" aria-expanded="true" とすると開いた状態になります。 これを踏まえて、あとは遷移元のページのなにが開かれたのかという情報を保持して、遷移先のページのDOM要素を操作(classとaria-expandedを上記の通り書き換える)すれば良いでしょう。Javascriptでcookieに値をセットしてやるのが無難な方法です。

noname#243511
質問者

お礼

教えていただきありがとうございます。Javascriptでcookieに値をセットをやったことないので、勉強します。

noname#243511
質問者

補足

早速のご回答いただきありがとうございます。 もし良ければ、遷移元のページのなにが開かれたのかという情報を保持する方法を教えていただけないでしょうか。

関連するQ&A

  • アコーディオンメニュー開閉動作

    はじめまして。 とある有料テンプレートを使用して会社のHPを作成しています。 使用しているテンプレートにアコーディオンメニューが実装されているのですが その開閉動作について修正したいのですが、Java関連には疎いものでお聞きしたいです。 使用させていただいているテンプレートは「フリー素材屋hoshino」さんの http://www.s-hoshino.com/web/high_002/index.html のテンプレートです。 修正したい箇所は、アコーディオンメニューがページを移動するたびに閉じてしまう点です。 アコーディオンメニューからカテゴリを選んでクリックし、その後移動したページでは その部分のアコーディオンメニューを開いたままにしておきたいです。 そうすることで、現在どのカテゴリーの、どの商品ページを見ているかもっとわかりやすくなりますし、同じカテゴリーのすぐ下のページにも移動しやすく(クリック回数が少なく)できると思います。 多分、jQueryやcookie関連の修正が必要と思いますが、私の方でも、テンプレート配布元でもやり方がわからないので教えていただきたいです。 わかりづらい文面で申し訳ありませんが宜しくお願いします。

  • Bootstrapのインストール?

    こんにちは。 業務でWebページを作ることになりました。 仕事柄、社内にWebページについて知っている人は皆無で、私も含めてhtmlファイルを手書きで書く昔ながらのホームページ程度の知識しかありません。用語だけは耳に入ってくるので聞いたことはあります。 客先から「簡易の管理ページをかっこよく作って」って言われて「スタイルシートに「Bootstrap」を使うと手軽にかっこよく作れるよ」と指定がありました。 先が思いやられますがコツコツ進めたいと思います。 とりあえずサンプルページを表示できるようにしたいと思います。 http://getbootstrap.com/examples/starter-template/ http://getbootstrap.com/examples/theme/ CentOSとApache入れてページを表示できるようになりました。 スタイルシートに「Bootstrap」を使いたいのですがどこに置けばいいのでしょうか。 bootstrap-3.3.7-dist.zipを展開して、/var/www/htmlに置けばよろしいのでしようか? 上記についてよろしくお願いします。

    • ベストアンサー
    • CSS
  • jQueryのアコーディオンメニュー 開閉の制御

    jQueryのアコーディオンメニュー 開閉の制御 以前はありがとございます。 またまたアコーディオンメニューなのですが・・・ http://web.donnatokimo.com/jquery/517 こちらを使用して、クリックして飛ぶようにはなりましたが、 開いているのが一番最初だけになってしまうので、コンテンツごとに開いた状態を制御したいです。 まったく知識が無いので、できればやさしく詳しく説明していただけると助かります。 どうかよろしくお願いします。

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

    私webデザイナーをしています。 アコーディオンメニューで(開くのは1つのパネルのみ)ページ遷移してもアコーディオンの開いている部分が閉じないものを作りたいと思っています。 しかし、下記のコードでどうしても実装できません。 技術のある方、間違いを教えていただけないでしょうか? 【html】 <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:"/"}); } }); よろしくお願いいたします。

  • Bootstrapとbootswatchの設定

    Bootstrapとbootswatchを使ってみたいと思い、ネットで調べながらやってみました。 Bootstrapまでは使えるようになったのですが、bootswatchが反映できていないようが気がします。 初期設定?まで行えるよう、具体的な手順を教えて頂けないかと思っております。 【行った手順】 1.Bootstrapをダウンロード 2.index.phpのhead箇所から bootstrap.min.css を読み込み 【使用したいテンプレート】 ・bootswatchのSimplex 【疑問点】 「ダウンロード」に様々なファイルがあるのですが、どれが必要なのか、どうやったらbootswatchのSimplexが使えるようになるのか、分かっていません。 【回答の欲しい事柄】 index.phpに記入するhead部分のソースを教えて下さい。 【どのような結果を求めているか】 bootswatchのSimplexと同じ、もしくは同じようなページを自分のレンタルサーバーで表示できるようになりたい。 その他、何かアドバイスなどありましたら併せて頂けましたら幸いです。 よろしくお願い致します。

    • ベストアンサー
    • CSS
  • HTML+CSSについて質問です

    当方のHPは左サイドにメニューリスト、中央部分に記事を書いている2カラムです。また、ページ数は100ページくらいありますが左サイドのメニューリストは全て共通となっています。左サイドのメニューリストは定期的に更新しているのですが、一つの項目を追加したい(削除したい)場合、全てのページの左サイドメニューを更新しなければならず、かなりの手間がかかってしまいます。なので、左サイドメニューは独立したHTMLを作成し、更新の手間がかからないような形にしたいと考えています。このようなHTML+CSSを作成する場合、どのようにすればよろしいのでしょうか?また、参考になるサイトがあればご教授よろしくお願いします。ちなみに当方のHPを作成する知識は、基本的なタグやCSSがわかる程度の初心者レベルです。

    • ベストアンサー
    • HTML
  • ブートストラップの機能について

    IR2302というゲートドライバを使用してNchフルブリッジモータドライバを作成しようと考えています。 ハイサイドNchMOSFETをONにするためには、ゲートにモータ側電源電圧+ゲートON電圧をかける必要があるというのを見ました。そこでブートストラップ回路が必要であるというのは理解しました。 しかし、その後調べていると駆動電源最大500V、ロジック電源5~15Vのゲートドライバといったものを見つけてしまいよくわからなくなってしまいました。 ブートストラップによって出力が約2倍になるのは副作用で、本質はソース側の電位を0Vにするための物なのでしょうか?

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

    jqueryのアコーディオンメニューを利用してるのですが、項目を3つから 2つに減らすためliタグを削除したのですが、その部分が空欄となり、 思うようにいきません。3つあって2つが繰り上がり下がブランクのメニューがあります。 elemnt.styleという箇所でheightが67ピクセルに設定されているようですが、 発見できず、困っております。 もしよろしければ教えて頂けると助かります。

  • HP作成で・・・初歩的ですが。

    初歩的な質問で恥ずかしいのですが、宜しくお願いします! 今サークルのHPを作成しているのですが、まともに作ったことがないので自動で作れるサイトを見つけてそこで作っています。 メニュー項目をオプションで増やせるのですが、オプションで作ったメニューは自分でページを作成しなくてはならないのです。 タグはある程度理解出来るのですが、『プルダウンメニューを作りたい』『表を作りたい』など、見やすく作りたいと思っていると段々訳が分からなくなってしまいました。 例えば、メモ帳でタグを使ってページを作ったとしてもそのページがどうやったらURLで表示出来るのかも分かりません。 超初心者でも分かる解説サイトはあるのでしょうか? わがままを言ったらタグを使わず、自動で作ってくれるソフトがあれば一番良いのですが・・・ そんな物ないのでしょうか? 説明の仕方も悪く、うまくかけないのですが詳しく分かる方おりましたら、教えてください。 宜しくお願いします。

  • Frameを使わないホームページの作成方法

    <frame>タグで、画面を分割していたWebページを、<frame>タグを使わないで書きかえたいと思います。 <table>タグやスタイルシートを使って書き換えようと思い、いろいろ調べたのですが、分かりませんでした。 デザインは画面左側にメニューがあり、右側にそれぞれの内容ページが表示されるよくあるパターンです。 <frame>タグの場合、別にHTMLファイルを作りメニューに追加してそのファイルを書き換えれば良いですが、<table>タグを使う場合や、スタイルシートを使う場合にはどうすればいいのでしょうか? また、メニュー項目が増えたときに1つのファイルの書き換えですむようにはできますでしょうか? もし、お分かりの方がいらっしゃいましたら、サンプルコードとあわせて 教えていただけないでしょうか? よろしくお願いいたします。