wordpressで、htmlだけでアコーディオンメニューを作ろうとしています。
アコーディオンの中にリンクがあって、それをクリックして別のページへ移り
ブラウザの戻るボタンでアコーディオンがあるページに戻ると、
アコーディオンが閉じてしまっています。(IEのみの現象で、firefoxやsafariでは閉じません)
下記がソースです。★部分には同じものが入ります。下記のソースに何か追加してアコーディオンを開いたままにできないものでしょうか?
このサイト(http://fukafuka295.jp/hp/hp_no10.html)を見て作りました。
詳しい方ヨロシクお願いします。
<!-- 折り畳み展開ポインタ -->
<div onclick="obj=document.getElementById('★').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">ここをクリックして展開</a>
</div>
<!--// 折り畳み展開ポインタ -->
<!-- 折り畳まれ部分 -->
<div id="★" style="display:none;clear:both;">
<a href="betsunopage">別のページ</a>
</div>
<!--// 折り畳まれ部分 -->
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
こんにちは
ページを遷移する場合は、そのページに関する情報はキャンセルされるのが通常です。
(戻るボタンの場合は、ある部分に関しては保持しているブラウザもあるようです)
それなので、状態を記憶しておきたい場合は、どこかにその状態を記録(保存)しておく必要があります。
このような場合に、以前、よく用いられていたのはクッキーと言われる記録場所です。
最近では、Web Strage と呼ばれる記録場所も提供されているので、こちらを利用することも可能でしょう。
記録する内容は、メニューが「閉じている/開いている」といった状態で、複数項目があれば、項目数だけ開/閉の状態を記録しておけばよいことになります。
実際の仕組みとしては、
1)ページ読み込み時に記録を確認して、記録があればその状態にセットする。
(なければ、なにもしない)
2)メニューの状態が変化したら(またはページを離れる際に)記録を更新する。
という処理の両方ができるようにしておけば、ご質問の内容は実現できるはずです。
ただし、このような処理を実行するにはjavascript等のプログラムが必要になります。
一方で、ご提示のメニューの仕組みにもjavascritが使われていますので、javascriptを利用すること自体には問題はないものと推測します。
具体的な方法は、「javascript cookie」や「javascript webstrage」などをキーに検索すると、利用方法の説明や例がいろいろと見つかることと思います。
あるいは、内容的にご質問と近いものを探したければ「アコーディオン 状態を保持」などで検索すれば、機能的にはほぼ同様のものがいろいろ見つかると思います。(具体的な実現方法は様々ですが…)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javaScript Nullまたはオブジェ...
-
Chromeがiframe内の「#~」に釣...
-
WEB上で編集できない、スク...
-
bodyにidをつける理由は何ですか?
-
<object data="">の挙動について
-
<a href="#" …>の意味を教えて...
-
javascriptとApacheの設定
-
複数のJavascriptを1つのscrip...
-
JW FLV Playerのプレイリスト連...
-
JavaScriptでiframeの内容を「...
-
window.onloadイベントの任意実...
-
相対パスと絶対パスの速度
-
新しいウィンドゥを最大化で立...
-
HTMLソースからURLだけを抜き出...
-
JavaScriptでの実装
-
SQLのWHEREで全てを質問する方法
-
<iframe>~</iframe>内のwindow...
-
<div>のタッチ状態を維持したま...
-
undefinedが表示されてしまう
-
window.openでフルスクリーン表...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
テキストボックス内にハイパー...
-
(Javascript)印刷するファイル...
-
ハイパーリンクに下線を表示す...
-
bodyにwidth:100%をつける理由は?
-
WEB上で編集できない、スク...
-
ワンクリックで二箇所に表示さ...
-
スクロールバーのスクロール量...
-
横スクロールを右から左へ・・・
-
テキストをクリックすると答え...
-
bodyタグの範囲について
-
ページの読み込みが完了してか...
-
「overflow: hidden」ペー ジ内...
-
"mailtoでメールの【氏名】【性...
-
外部ページからハッシュタグ(...
-
DOCTYPE宣言をするとstyleが適...
-
mailtoで質問・・・
-
IE以外は色が付かない なぜ?
-
javaScript Nullまたはオブジェ...
-
divで作成したテキストボックス...
おすすめ情報