jQueryでアコーディオンメニューの挙動が思うようにいかなかった時の初歩的ミス

忘れないうちにメモ。

単にjQueryの練習で、slidUp()とslideDown()を使用して、アコーディオンメニューのような挙動にしたかっただけ。

マウスが乗った時にメニューが出てきて、外れた時にしまう。

ただそれだけなのに、liにのせて、いざ子要素のulにマウスを乗せてクリックしようとすると、しゅるるるると要素が隠れてしまい、クリックできない。

jQuery の記述が間違えているのかと思い何度も調べ書き直したが一向にうまくいかず。

mouseoverとmouseoutを書き換えてmouseenterとmouseleaveにしてもうまくいかず。
（この変更でうまくいくはずであった）

コンソール上エラーはでていないし、何が原因だ？とhtmlを眺めて閃く。

原因はidの付与タグが、liではなくaになっていたこと…！！

こうしなきゃいけなかったのが

<li id="slide"><a href="#article-list">記事一覧</a>
<ul id="slide-child">
<li><a href="#article-list">記事タイトル1</a></li>                    
<li><a href="#article-list">記事タイトル2</a></li>
<li><a href="#article-list">記事タイトル3</a></li>
</ul>
</li>

こうなってた。

<li><a href="#article-list" id="slide">記事一覧</a>
<ul id="slide-child">
<li><a href="#article-list">記事タイトル1</a></li>                   
<li><a href="#article-list">記事タイトル2</a></li>
<li><a href="#article-list">記事タイトル3</a></li>
</ul>
</li>

これだと、<a>の子要素にマウスの外れた時の行動を反映させてることになるので、<li>タグの中の<ul>には反映されない。

ちゃんと<li>タグにクラスを付け替えたらうごきました。

チャンチャン。

以下デモ

See the Pen jQueryアコーディオン by Micche (@micche) on CodePen.