jQueryで開閉式(アコーディオン)の縦メニューを作りました。
http://www1.m.jcnnet.jp/minato01/demo/j-menu/
このメニューで、以下の2点の仕様を追加希望です。
1. 「メニュー1」「メニュー2」を最初から開いた状態で表示したい
2.できれば、ページ移動した場合、前の開いた内容を記憶させたい(cookieでOK)
特に「1」は必須事項です。
色々検索してみましたが、方法が色々あっても
すべて満たす方法が見つかりません。
ソースは以下の通りです。
--------------------
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
分かる方、ぜひ具体的にどこをどう修正したらよいか
詳しく教えていただければ幸いです。
どうぞよろしくお願いいたします。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
こんにちは。
>特に「1」は必須事項です。
とのことなので1のみですが・・・
以下のどちらのやり方でも可能かと
・初期設定でselectedのクラスを設定しておく
・スクリプトで設定後にクリックを行なう
2番目の方法は、設定のスクリプトにチェーン・メソッドで、
.filter(":lt(2)").click();
みたいな感じ。
(上記の場合だと最初の2項目が対象)
2は、ご質問通りで、「メニューを変更したらその状態をクッキーに保存。」
「ページの読み込み時にクッキーを調べ、その状態にセットする。」
といった部分を追加すればよろしいかと思います。
クッキーの読み書きについては、検索すれば情報がたくさんみつかるはずです。
fujillinさん、ご回答ありがとうございます。
>・初期設定でselectedのクラスを設定しておく
>・スクリプトで設定後にクリックを行なう
もし、可能であればソースを記入いただけると
非常にありがたいです。
どうぞよろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS インラインブロックの中のテキストを上下中央に合わせたい 1 2022/12/24 17:46
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
フォントサイズの変更
-
戻ってきた時ツリーメニューが...
-
多階層ドロップダウンのスマホ...
-
pythonのDjangoでHTML内で変数...
-
jqueryのsortableで一部ソート...
-
文字と数字が混在する要素のsor...
-
jqueryアコーディオンのマウス...
-
jQueryセレクタ/複数要素の指...
-
プルダウンメニュー連動後の処...
-
ツリーメニューについて
-
jqueryプルダウンメニュー個別着色
-
javascript テキストエリアを1...
-
MAX関数を使ってからLEFT JOIN...
-
c++std::string型をTCHARに変換...
-
htmlの記述で link rel=styles...
-
JQueryで画像の上で文字を動かす
-
ロールオーバー効果にならない。
-
jspでcssが読み込めない
-
スライダーを実装した場合、ペ...
-
離れた場所にマウスオーバーで...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
javascriptでEnterキーをtabキ...
-
クリックした<a>タグのみにClas...
-
チェックボックスに入っている...
-
【javascript で動的に a タグ...
-
jquery ドロップダウンメニュー...
-
「jQuery」アコーディオンメニ...
-
jQueryで、リンクURLの一致を確...
-
jQueryのeqで最後からn番目以降...
-
ネストされたチェックボックス...
-
javascriptで、クリックしたら...
-
onmouseoverの表示切り替えが上...
-
文字と数字が混在する要素のsor...
-
jQueryでネスト構造の<li>がク...
-
タブメニューを上下に設置
-
<li></li>の数を制限
-
jQuery多層式アコーディオンメ...
-
どの<li><a> が押されたか判別...
-
CSSとJavaScriptを使ってドロッ...
-
複数の画像をランダム(シャッ...
おすすめ情報