jqueryドロップダウンメニューのコードについて質問です。
JavaScript初学者です。jqueryを使って「メニューをhoverするとhoverした要素の下に隠れている中のメニューが表示され、メニューから離れると表示された中のメニューが非表示されるプログラムを作る」という課題がある(htmlで指定されているクラスは削除や追加などの編集禁止)のですが、その答えのコードを見てもいまいち理解ができなかったのでjqueryのコードの部分について2つ質問させてください。
1.要素の指定は $(".menu__list").children()となっているのですが、メニューバーの"Animal"と"Plant"の「どちら」にホバーしたか、というのはどの部分で判断しているのでしょうか。$(".menu__list").children()の指定だとクラス名に".menu__list"がついているulタグの全ての子要素、つまりliタグの要素をとってくるということになるので明示的にどっちの要素か表していないのにちゃんと判断して動いているのが不思議でたまりません。
2."stop()"はなぜ"slideDown()"と"slideUp()"の前でないと動作しないのでしょうか。
わかりにくい文章で申し訳ありませんが、本当に悩んでいるのでご教示くださるととても嬉しいです。
$(function(){
$(".menu__list").children().hover(function(){
$(this).children().next().stop().slideDown();
}
,function(){
$(this).children().next().stop().slideUp();
}
)}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>jQuery</title>
</head>
<body>
<div class="wrapper">
<ul class="menu__list clearfix">
<li>
<p class="menu__list__title">Animal</p>
<ul class="menu__list__childList" style="display: none;">
<li>
<p class="menu__list__childList__title">Lion</p>
</li>
<li>
<p class="menu__list__childList__title">Zebra</p>
</li>
<li>
<p class="menu__list__childList__title">Elephant</p>
</li>
<li>
<p class="menu__list__childList__title">Rhino</p>
</li>
</ul>
</li>
<li>
<p class="menu__list__title">Plant</p>
<ul class="menu__list__childList" style="display: none;">
<li>
<p class="menu__list__childList__title">Cedar</p>
</li>
<li>
<p class="menu__list__childList__title">Olive</p>
</li>
<li>
<p class="menu__list__childList__title">Aloe</p>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>