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

You need to use this as a context to search for the .submenu element within, like this:

$(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");