52703


JavaScript初学者です。jqueryを使って「メニューをhoverするとhoverした要素の下に隠れている中のメニューが表示され、メニューから離れると表示された中のメニューが非表示されるプログラムを作る」という課題がある(htmlで指定されているクラスは削除や追加などの編集禁止)のですが、その答えのコードを見てもいまいち理解ができなかったのでjqueryのコードの部分について2つ質問させてください。

1.要素の指定は
$(".menu__list").children()となっているのですが、メニューバーの"Animal"と"Plant"の「どちら」にホバーしたか、というのはどの部分で判断しているのでしょうか。$(".menu__list").children()の指定だとクラス名に".menu__list"がついているulタグの全ての子要素、つまりliタグの要素をとってくるということになるので明示的にどっちの要素か表していないのにちゃんと判断して動いているのが不思議でたまりません。

2."stop()"はなぜ"slideDown()"と"slideUp()"の前でないと動作しないのでしょうか。

わかりにくい文章で申し訳ありませんが、本当に悩んでいるのでご教示くださるととても嬉しいです。

[code]

    $(function(){
      $(".menu__list").children().hover(function(){
        $(this).children().next().stop().slideDown();
      }
      ,function(){
        $(this).children().next().stop().slideUp();
      }
    )}
    
      );
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2019-02-09T12:13:42.560
52664
2019-02-11T12:15:16.703
32114
question
javascript jquery
jqueryドロップダウンメニューのコードについて質問です。


1.については、hover()した対象がthisに入っています。  
ですので`$(this)`と書けば、最初の要素にhoverしたなら最初のli要素、二番目の要素にhoverしたなら二番目のli要素がthisになるので、特に条件分岐を書かなくても動くというわけです。

2.についてはstop()は動作中のアニメーションをストップさせるというものなので、  
ソースコードでは、ホバーしてスライドダウンしているときにマウスを離すと、  
スライドダウンのアニメーションをストップしてからスライドアップのアニメーションを開始するという処理になっています。  
それが、`$(this).children().next().slideUp().stop()`とストップとスライドアップの順番を逆にしてしまうと、スライドアップの処理を開始すると同時にそのアニメーションをストップするという処理になり、結果スライドアップのアニメーションが始まらないという結果になります。


CC BY-SA 4.0
2019-02-11T12:15:16.703
52703
2019-02-11T12:15:16.703
2475
52664
answer