jquery - jqueryで$（this）を使用して子要素に関数を適用する方法

Question

私は基本的にjQueryでスライドダウンナビゲーションを適用しようとしています。私はこのコードを使用します：

<script>
    $(document).ready(function() {
        $(".menu").hover(function(){
            $(".submenu").animate({ height: 'show', opacity: 'show' }, 'slow');
        }, function(){
            $(".submenu").animate({ height: 'hide', opacity: 'hide' }, 'slow');
        });
    });
</script>

しかし、.menudivにカーソルを合わせると、すべての.submenudivが下にスライドします。だから私はを使用してそれを達成しようとしました$(this)。しかし、私はこれを行う方法がわかりません。

Answer 1

次のように、要素thisを検索するためのコンテキストとして使用する必要があります。.submenu

$(document).ready(function() {
    $(".menu").hover(function(){
        $(".submenu", this).animate({ height: 'show', opacity: 'show' }, 'slow');
    }, function(){
        $(".submenu", this).animate({ height: 'hide', opacity: 'hide' }, 'slow');
    });
});

Answer 2

最近では、次のようなイベントをバインドしたいと考えています:

   $(document.body).on({
       mouseover : function(e) {
             $(this).find(".submenu")...
         },
       mouseout  : function (e) {
            //...
          }
       //,...
     },".menu");