質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

4228閲覧

3階層型のアコーディオンメニューについて

mintstar

総合スコア7

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/06/15 11:31

編集2016/06/15 12:26

###3階層型のアコーディオンメニューについて

jQuery初心者です。テキストやサイトなどを見て途中まで作ることができましたが、私の自力では解決できそうもなく、質問させて頂きました。
以下のようなアコーディオン型のメニューを作成しているのですが、3階層目の「サブ」項目が「メニュー」項目に収まるようにするには、jQueryのスクリプト部分をどのような記述にすればよいでしょうか。
どうぞよろしくお願い致します。

###発生している問題・エラーメッセージ

エラーメッセージ

###該当のソースコード

$(function(){ $("ul.menu").hide(); $("div.category").click(function(){ $("ul.menu").slideUp(); if($("+ul",this).css("display")=="none"){ $("+ul",this).slideDown(); } }); }); </script>
<style type="text/css"> a { text-decoration: none; } ul.navi{ width:200px; margin:0px; } ul.navi,ul.menu,ul.sub{ margin:0; padding:0; list-style:none; } div.category{ margin-top:5px; height:40px; line-height:40px; background-color:#CCC; cursor::pointer; } ul.menu a{ display:block; height:35px; line-height:35px; color:#164158; cursor::pointer; } </style>
<ul class="navi"> <li> <div class="category"><a href="#">カテゴリー1</a></div> <ul class="menu"> <li><a href="#">メニュー1</a></li> <ul class="sub"> <li><a href="#">サブ1</a></li> <li><a href="#">サブ2</a></li> </ul> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> </ul> </li> <li> <div class="category">カテゴリー2</div> <ul class="menu"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> </ul> </li> </ul>

###試したこと

<ul>と<li>のみを使い、親メニューと子メニューの関係で作ってもみましたが、CSSの処理がうまくできませんでした。 できれば上記の内容で仕上げたいと思っています。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/06/15 11:50

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
mintstar

2016/06/15 12:22

ご返信ありがとうございます。コードブロックで囲んでみたのですが、このような形で大丈夫でしょうか。細かな事が分らずお恥ずかしい限りです(^^;)
kei344

2016/06/15 12:24

コードブロックから漏れている箇所は削除しても良いと思います。また、Bodyの中身は1まとめで良いと思います。
mintstar

2016/06/15 12:27

修正致しました。ありがとうございます!
guest

回答2

0

解決済みですが

html

1<ul class="menu"> 2 <li><a href="#">メニュー1</a></li> 3 <ul class="sub"> 4 <li><a href="#">サブ1</a></li> 5 <li><a href="#">サブ2</a></li> 6 </ul> 7 <li><a href="#">メニュー2</a></li> 8 <li><a href="#">メニュー3</a></li> 9</ul>

この部分の<ul class="sub"><ul class="menu">の子要素になってしまっています。
ulの子要素はliのみになるので

html

1<ul class="menu"> 2 <li><a href="#">メニュー1</a> 3 <ul class="sub"> 4 <li><a href="#">サブ1</a></li> 5 <li><a href="#">サブ2</a></li> 6 </ul> 7 </li> 8 <li><a href="#">メニュー2</a></li> 9 <li><a href="#">メニュー3</a></li> 10</ul>

とメニュー1の子要素に配置したほうが良いと思います。


指摘だけではあれなので・・・こういう方法もあるという別パターンを載せておきます。

前述の<ul class="sub">の位置を直した上で

css

1ul.navi ul{ 2 display: none; 3} 4 5ul.navi li:hover>ul{ 6 display: block; 7}

とcssで開閉することも可能です(動きを付ける場合はcssのanimationを使う感じで)

投稿2016/06/16 00:46

編集2016/06/16 00:49
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mintstar

2016/06/21 02:38

丁寧なご回答ありがとうございます! お礼が大変遅くなってしまい。申し訳ございませんでした。 子要素の部分が自分でもとても曖昧だったので、ご指摘頂き勉強になりました。 教えて頂いたCSSで開閉するパターンもありがとうございました!
guest

0

ベストアンサー

実際に動くサンプルがいろいろ公開されているので、ご自身の目的に合ったものと見比べながら、あちこちいじってみると理解が速まるのではないでしょうか?

例えば下記ページのサンプルは、シンプルで見易いです。

jQuery 多階層アコーディオンメニュー

投稿2016/06/15 13:36

pi-chan

総合スコア5936

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mintstar

2016/06/15 14:25

こちらのページは初めて見ました! まだまだ不勉強なので、ぜひ参考にさせて頂きます。 ご回答ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問