いつも参考にさせて頂いております。
あるサイト様(http://triplexxx.jp/archives/150)を参考にjQueryで2段式のアコーディオンメニューを作成していましたが、何分初心者なもので早々に行き詰まってしまいました。
理想はこちらのサイト様(http://html-five.jp/pc/demo/002/)にあるデモの下側、『2段アコーディオン』をこちら(http://html-five.jp/demo/002/index2.html)の『ポンプ型アコーディオン』ような動きにしたいと思っております。
スクリプト自体を入れ子にしたりしてみましたが根本的な部分がダメなようでうまくいきませんでした。
何卒ご教授いただけますようお願いします。
[参考にしたjQuery(1段までは問題なく動きます)]
script type="text/javascript">
var j$ = jQuery;
j$(function(){
j$(".ac_parent").each(function(){
j$("li > a").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);
return false;
});
});
});
});
</script>
[作成中のHTML]
<div>
<ul class="ac_parent">
<li><a href="#">1</a>
<ul class="ac_child">
<li><a href="#">11</a></li>
<ul class="ac_gchild">
<li><a href="#">111</a></li>
<li><a href="#">112</a></li>
<li><a href="#">113</a></li>
</ul>
<li><a href="#">12</a></li>
<ul class="ac_gchild">
<li><a href="#">121</a></li>
<li><a href="#">122</a></li>
<li><a href="#">123</a></li>
</ul>
</ul>
</li>
<li><a href="#">2</a>
<ul class="ac_child">
<li><a href="#">21</a></li>
<ul class="ac_gchild">
<li><a href="#">211</a></li>
<li><a href="#">212</a></li>
<li><a href="#">213</a></li>
</ul>
<li><a href="#">22</a></li>
<ul class="ac_gchild">
<li><a href="#">221</a></li>
<li><a href="#">222</a></li>
<li><a href="#">223</a></li>
</ul>
</ul>
</li>
<li><a href="#">3</a>
<ul class="ac_child">
<li><a href="#">31</a></li>
<ul class="ac_gchild">
<li><a href="#">311</a></li>
<li><a href="#">312</a></li>
<li><a href="#">313</a></li>
</ul>
<li><a href="#">32</a></li>
<ul class="ac_gchild">
<li><a href="#">321</a></li>
<li><a href="#">322</a></li>
<li><a href="#">323</a></li>
</ul>
</ul>
</li>
</ul>
</div>
No.1
- 回答日時:
スクリプトをいろいろ試す前に、マークアップを調整したほうがよろしいかと。
ulの直下にul要素があるみたいですし。
この回答への補足
fujillin様
ご指摘ありがとうございます!
きちんとした入れ子になっていなかったようです・・・
ul、liを入れ子にして良いのかどうか知らないのですが一応修正してみました。
[修正後のHTML]
<div>
<ul class="ac_parent">
<li><a href="">1</a>
<ul class="ac_child">
<li><a href="">11</a>
<ul class="ac_gchild">
<li><a href="">111</a></li>
<li><a href="">112</a></li>
<li><a href="">113</a></li>
</ul>
</li>
<li><a href="#">12</a>
<ul class="ac_gchild">
<li><a href="">121</a></li>
<li><a href="">122</a></li>
<li><a href="">123</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
この状態で親用と子用のスクリプトを並べて書いておくと孫もスライドするようになりました!
が、孫のみ開いてもすぐに閉じてしまいます・・・
スクリプトも入れ子にしておかなければダメなのでしょうか。
お手を煩わせますが今一度アドバイス頂ければ非常に助かります。
よろしくお願いします。
[親用のスクリプト]
<script type="text/javascript">
var j$ = jQuery;
j$(function(){
j$(".ac_parent").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);
return false;
});
});
});
});
</script>
[子用のスクリプト]
<script type="text/javascript">
var j$ = jQuery;
j$(function(){
j$(".ac_child").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);
return false;
});
});
});
});
</script>
No.2ベストアンサー
- 回答日時:
ANo1です。
HTMLの構造が明確になりました。補足に記載の構造であれば一段目と二段目は同じ構造になっているはずですので、リンク要素をクリックしたらその次の兄弟要素のulの開閉をトグルで行なうように記述すれば、親用、子用とスクリプトを分ける必要は無いように思います。
以下は上記の説明とは逆の方法で設定していますが、こんな感じでは?
(ul側から見て、前の兄弟要素のクリックにイベントを設定していますが、結果的には同じことです。これだとulが無いリンク要素にまでイベントを設定しなくてすみます。)
(全角空白は半角に)
$(function(){
$("ul", $("ul.ac_parent")).each(function(){
var $ul = $(this).hide();
$(this).prev("a").click(function(){
$ul.slideToggle("fast");
return false;
});
});
});
この回答への補足
fujillin様
何度もありがとうございます!
頂いたコードを元に、『アニメーションの追加』と『クリックイベント時に既に開いているメニューを閉じる』処理を試行錯誤しながら自分なりに組み込み、ようやく希望の動作にもっていくことができました!(こんな時間になってしまいましたが・・・笑)
[最終のコード]
<script type="text/javascript">
$(function(){
$("ul", $("ul.ac_parent")).each(function(){
var $ul = $(this).hide();
$(this).prev("a").click(function(){
var params = {height:"toggle", opacity:"toggle"};
$(this).next().animate(params).parent().siblings()
.children("ul:visible").animate(params).siblings();
return false;
});
});
});
</script>
これが良い書き方なのかどうか、実用性があるのかどうかはともかくとして後に参考になるかもしれませんので補足として最終形のコードを記載させて頂きます。
fujillin様
この度は本当にありがとうございました。
実のところSQLやVBAを趣味程度ですが触っているものの、HTMLやCSS、JavaScriptは数日前に始めたばかりで何がなんだかさっぱりの状態でしたが、fujillinさんのアドバイスで希望通りの動作までもっていけたことに加え、おもしろさを色々と感じることができました。
まだまだ素人レベルですが頑張っていく元気が沸きました!
また質問することもあるかと思いますが、お手隙の際には相手して頂ければと思います。
本当にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- HTML・CSS htmlについて質問です! 写真のように写真の部分が?になってしまいます。 ファイルもしっかり選べて 1 2023/07/09 21:17
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- その他(IT・Webサービス) html cssについて 3 2023/05/13 12:48
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS インラインブロックの中のテキストを上下中央に合わせたい 1 2022/12/24 17:46
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
関連するカテゴリから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を使ってドロッ...
-
複数の画像をランダム(シャッ...
おすすめ情報