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);
});
});
});
});
----------------------
No.1ベストアンサー
- 回答日時:
未検証ですが…
n番目のカテゴリだけ開いておきたいのであれば、当該部分を
if (index != n) $this.next().hide();
などとしておけば、初期状態はn番目(0スタート)だけが開いたものとなります。
ただし、ページ遷移時にこれが実行できるようにnを受け渡してあげなければなりません。
その方法として
1)呼び出されたページ側にnを記載しておく(フレームなどを使用していない条件)
2)リンク時にロケーション・ハッシュ(/ccc.htmlI#XYZ の#XYZの部分)を利用して受け渡す
3)クッキーを利用して受け渡す。
などが考えられますが、1)が一番簡単かと思われます。
ありがとうございます。
とりあえず、
if (index != n) $this.next().hide();
で、n の部分を変えた .js をメニューの数だけ作成して
ページごとに使用する .js を変えるという方法にしました。
もっとスマートに分岐させる方法もあるのかと思います。
詳しく教えていただけると嬉しいです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS htmlについて質問です! 写真のように写真の部分が?になってしまいます。 ファイルもしっかり選べて 1 2023/07/09 21:17
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS インラインブロックの中のテキストを上下中央に合わせたい 1 2022/12/24 17:46
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
同一ページ移動時ハンバーガー...
-
SQLのmaxで求めた値を変数に代...
-
Selenium4でボタンをクリックで...
-
階層別の組織図の自動作成について
-
マスターページ使用時のJavascript
-
EUC-JPに対応しているjQueryを...
-
画面(ウィンドウ)/画像の拡...
-
struts selectbox optionsColle...
-
Ajax サーバーに負荷かかります...
-
JavascriptからPHPへのAjax通信...
-
Ajaxの結果のページングの方法
-
一定時間ごとに表示内容を切り...
-
jQueryを使いformでsubmitした...
-
jqueryについて、$("+dd",this)...
-
CSVファイルの文字列の表示につ...
-
Doctrineのjoinについて
-
Googleストリートビューの写真...
-
プルダウン内容に応じてラジオ...
-
リンク元のファイル名を表示し...
-
jQuery.illuminateの使い方
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
同一ページ移動時ハンバーガー...
-
jQueryを複数設置した場合の優...
-
アコーディオンで多階層のメニ...
-
jqueryで開閉メニューの状態をc...
-
CSSプルダウンメニューとjQuery...
-
サイトでタブをスライドで切り...
-
jQueryプラグインが動かない
-
JavascriptからPHPへのAjax通信...
-
Javascriptを使ってQRコード読...
-
Selenium4でボタンをクリックで...
-
要素内を常に一番下を表示させたい
-
jQueryを使いformでsubmitした...
-
階層別の組織図の自動作成について
-
JavaScriptでtabindexの変更っ...
-
Googleマップに複数のピンを立...
-
SQLのmaxで求めた値を変数に代...
-
パソコンで動くjavascriptがス...
-
readyStateが4にならない原因
-
AjaxでJSONを受信すると、文字...
-
変数にドットをいれることはか...
おすすめ情報