jQueryによるドロップダウンメニューの作成について

Question

li要素にホバーすると、子ul要素が展開されるシンプルなドロップダウンメニューをjQueryで作成しようとし、下記のコードを組みましたが、何も反応しません。。。色々調べましたが理解できる原因が特定できなかったため、どなたかお助けいただければ幸いです。

<div class="wrapper">
  <ul class="list">
    <li>Item A
      <ul class="child_list">
        <li><a href="#">Item A1</a></li>
        <li><a href="#">Item A2</a></li>
        <li><a href="#">Item A3</a></li>
      </ul>
    </li>
    <li>Item B
      <ul class="child_list">
        <li><a href="#">Item B1</a></li>
        <li><a href="#">Item B2</a></li>
        <li><a href="#">Item B3</a></li>
      </ul>
    </li>
    <li>Item C
      <ul class="child_list">
        <li><a href="#">Item B1</a></li>
        <li><a href="#">Item B2</a></li>
        <li><a href="#">Item B3</a></li>
      </ul>
    </li>
  </ul>
</div>

.wrapper {
  margin-left: 5px;
  margin-top: 5px
}

.list > li {
  /* わかりやすいように背景色をつける */
  background-color: #eee;

  /* 幅を持たせる */
  display: block;
  width: 100px;

  /* テキストの真ん中寄せ */
  text-align: center;
}

.child_list li {
  /* わかりやすいように背景色をつける */
  background-color: #DDF;
}

a {
  color: #333;
  text-decoration:none;
}

/* ブレッドをなくす */
ul {
  /* ブレッドをなくす */
  list-style-type: none;

  /* 左側に入る余白を詰める */
  padding-left: 0px;
}

.list {
  /* 親リストを横並びにする */
  display: flex;
}


.child_list {
  display: none;
}

$('.list li').hover(()=> {
  $(this).children().slideDown();
}, () => {
  $(this).children().slideUp();
});

初心者感丸出しでたいへん恥ずかしいのですが、よろしくお願いいたします。

Answer 1

()=>とアロー関数を使っているので、$(this)が使えません（セレクタで取得した物とは違う物になっているので確認してみてください）。
e=>とかしてeから現在の要素を採るか、function()を使いましょう。

Comments

[Kotolog_shun]

ありがとうございます。解決しました。なるほど、アロー関数について理解が不十分でした。。。
大変助かりました。