jquery - jQuery 仅在元素存在时添加类

Question

我如何调整下面的代码以根据需要工作？

目前.active添加到主页<a>标签和服务<a>标签。但我只希望它在.submenu存在时添加

html

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a><div class="submenu">menu contents</div></li>
</ul>

jQuery

$(document).ready(function(){
    $('.nav li').mouseenter(function(){
        $(this).find('a').addClass('active');
        $(this).find('.submenu').fadeIn();
    }).mouseleave(function(){
        $(this).find('.submenu').stop().fadeOut();
        $(this).find('a').removeClass('active');
    });
});

Answer 1

$(function(){
    $('.nav li').on('mouseenter mouseleave', function(e){
        var sub   = $(this).find('.submenu'),
            state = e.type == 'mouseenter';

        if (sub.length) {
            $(this).find('a').toggleClass('active', state);
            sub[state ? 'fadeIn' : 'fadeOut']();
        }
    });
});

Answer 2

干得好：

$(document).ready(function(){
    $('.nav li').mouseenter(function(){
        var $this = $(this),
            $submenu = $this.find('.submenu');
        if($submenu.length>0){
            $this.find('a').addClass('active');
            $submenu.fadeIn();
        }
    }).mouseleave(function(){
        var $this = $(this),
            $submenu = $this.find('.submenu');
        if($submenu.length>0){
            $this.find('a').removeClass('active');
            $submenu.fadeOut();
        }
    });
});

但更简单的方法是在 CSS 中解决这个问题：

.nav li .submenu { display:none; }
.nav li:hover .submenu { display:block; }
.nav li:hover a { /* equivalent to a.active */ }

或者，要进行“更柔和”的过渡：

.nav li .submenu { height:0; overflow:hidden; transition:height 250ms linear; }
.nav li:hover .submenu { height:auto; }