「jQuery」アコーディオンメニューがうまく動きません

jQuery初心者です。
ホームページのサイドカラムにアコーディオンメニューを作ろうとしているのですが、
上手く動作しないためお力を貸していただけると助かります。


jQueryバージョン：2.1.3

■HTML
<ul>
<li class="oya"><a href="A.html">リンクA</a>
<ul class="kodomo">
<li><a href="AA.html">リンクAA</a></li>
<li><a href="AA.html">リンクAA</a></li>
<li><a href="AA.html">リンクAA</a></li>
</ul>
</li>
<li class="oya"><a href="B.html">リンクB</a>
<ul class="kodomo">
<li><a href="BB.html">リンクBB</a></li>
<li><a href="BB.html">リンクBB</a></li>
<li><a href="BB.html">リンクBB</a></li>
</ul>
</li>
</ul>


■希望する動き
普通のアコーディオンの動きで特殊なものでは無いと思うのですが、念のため。

・初期状態は<ul class="kodomo">が非表示。
・<li class="oya"><a href="A.html">リンクA</a>をクリックで以下を開閉。
<ul class="kodomo">
<li><a href="">リンクAA.html</a></li>
<li><a href="">リンクAA.html</a></li>
<li><a href="">リンクAA.html</a></li>
</ul>
・<li class="oya"><a href="B.html">リンクB</a>をクリックで以下を開閉。
<ul class="kodomo">
<li><a href="">リンクBB.html</a></li>
<li><a href="">リンクBB.html</a></li>
<li><a href="">リンクBB.html</a></li>
</ul>

.oyaである
<a href="A.html">リンクA</a><a href="B.html">リンクB</a>クリックの際の動きは下記のどちらでも構いません。
↓↓↓どちらでもいいです↓↓↓
「A.html、B.htmlに飛ぶ。同時にアコーディオンも開く」
「A.html、B.htmlには飛ばず、アコーディオンのみ開く」
※A.html、B.htmlにも同じアコーディオンナビゲーションを設置しています。

そもそもA.html、B.htmlリンクが邪魔なのかもしれませんが、CMSを使用しているため外すことができません。


【失敗したパターン１】
$(function(){
$('ul.kodomo').hide();
$('li.oya a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
});
});

※アコーディオンが開いた瞬間に閉じてしまいます。
ちなみに'li.oya a'→'li.oya'にすると.nextが効かなくなりアコーディオンが開かなくなります。


【失敗したパターン2】
$(function(){
$('ul.kodomo').hide();
$('li.oya a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
return false;
});
});

※パターン１に「return false;」を追加しました。
アコーディオンを開閉できるようになりましたが、
ul.kodomo配下の<a href="">リンクAA.html</a><a href="">リンクBB.html</a>が効かなくなってしまいました。


[失敗したパターン3]
$(function(){
$('ul.kodomo').hide();
$('li.oya').on("click", function() {
$(this).find('ul.kodomo').slideToggle();
return false;
});
});

※パターン3より「li.oya a」→「li.oya」
「.next」→「.find」に変更。
アコーディオンは開閉します。
ただ、ul.kodomo配下の<a href="">リンクAA.html</a><a href="">リンクBB.html</a>をクリックすると該当ページには飛ばず、アコーディオンが閉じてしまいます。

なんだか良くわからなくなってきてしまいました。
ちなみに他のJQuery記述はすべて削除の上、確認、
全体はjQuery(function(){　});で囲っています。

ごくごく初歩的な部分でつまづいているのだとは思いますが、
何卒賢者のお力を。

No.1 ベストアンサー 回答者： DoubtOwl 回答日時： 2015/02/04 11:32

パターン２に少し手を加えれば動きます。

'li.oya a'→'li.oya > a'

$(function(){
$('ul.kodomo').hide();
$('li.oya > a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
return false;
});
});

一つずつ解説します。

【失敗したパターン１】
$(function(){
$('ul.kodomo').hide();
$('li.oya a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
});
});
リンクが効いてしまうのでページ移動（＝アコーディオンが開いた瞬間に閉じる）
対応にはタグの変更が必要（TARGET="_blank"）を入れるなど。
※'li.oya a'→'li.oya'にした場合は「li.oyaの子孫の全てのa」にクリックイベントが不可されるので
next('ul.kodomo')が見つけられない

【失敗したパターン2】
$(function(){
$('ul.kodomo').hide();
$('li.oya a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
return false;
});
});
'li.oya a'→'li.oya'にした場合は「li.oyaの子孫の全てのa」にクリックイベントが不可されるので
アコーディオンの子要素のaタグにもクリックイベントが付加されていため。
※'li.oya a'→'li.oya > a'にすると「li.oyaの子のa」に限定されるので希望している動きになります。

[失敗したパターン3]
$(function(){
$('ul.kodomo').hide();
$('li.oya').on("click", function() {
$(this).find('ul.kodomo').slideToggle();
return false;
});
});
これは'li.oya'のタグがクリックされた時（子孫の要素も含む）
'li.oya'の子孫から'ul.kodomo'を探し出し、slideToggleを行い、
return falseする(ページ移動をキャンセル)
という処理になっています。

この回答へのお礼

意図する動きになりました。

元の記述（>無し）ですとkodomoリンクにも影響を与えてしまっていたのですね。
それぞれのパターンへの解説、大変勉強になりました。
ここまで丁寧に回答いただけると思いませんでした。本当に感謝いたします。

お礼日時：2015/02/04 13:17