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; }

如果元素存在，jQuery只添加类

2 个答案: