Question

我有一个基本清单：

<ul class="mainNav">
<li class="menuparent"><a href="#">level one a</a><ul>
    <li><a href="#">level two a</a></li>
    <li><a href="#">level two b</a></li>
    <li><a href="#">level two c</a></li>
</ul></li>
<li><a href="#">level one b</a></li>
</ul>

当页面加载大于600px时，以下Jquery用于显示和隐藏通过淡入/淡出的二级导航：

$('li.menuparent').hover(function(){
        $(this).children('ul').fadeIn('slow');
    },function() {
         $(this).children('ul').fadeOut('slow');
});

但是，当浏览器窗口缩放到小于600px时，我使用以下Jquery通过切换显示/隐藏第二级导航：

$('li.menuparent').click(function(event) {
    $(this).children('ul').toggle();
});

我的问题是，即使我将窗口缩小到600px以下，因为它的加载大于悬停jquery（fadeIn / Out）仍在操作而不是切换。

我是否使用stop（），如果是这样，我的代码应该是什么，因为我尝试了以下但是它不起作用

$('li.menuparent').hover(function() {
    $(this).children('ul').stop();
});

Answer 1

尝试

var $lis = $('li.menuparent'),
    flag;
$(window).resize(function () {
    var width = $(window).width();
    if (flag != 1 && width < 500) {
        flag = 1;
        $lis.on('click.toggle', function (event) {
            $(this).children('ul').toggle();
        }).off('mouseenter.toggle mouseleave.toggle')
    } else if (flag != 2 && width >= 500) {
        flag = 2;
        $lis.on('mouseenter.toggle', function (event) {
            $(this).children('ul').stop(true, true).fadeIn('slow');
        }).on('mouseleave.toggle', function (event) {
            $(this).children('ul').stop(true, true).fadeOut('slow');
        }).off('click.toggle');
    }
}).resize()

演示：Fiddle

Answer 2

我会使用事件委托将事件处理与窗口调整大小事件分开，然后通过添加/删除类来控制它。

$(".mainNav").on("click.toggle",".menuparent.clickable",function(){
    $(this).children('ul').toggle();
}).on("mouseenter.toggle",".menuparent.hoverable",function(){
    $(this).children('ul').fadeIn('slow');
}).on("mouseleave.toggle",".menuparent.hoverable",function(){
    $(this).children('ul').fadeOut('slow');
});

$(window).resize(function(){
    var width = $(window).width();
    if (width < 600) {
        $("li.menuparent").removeClass("hoverable").addClass("clickable");
    }
    else {
        $("li.menuparent").addClass("hoverable").removeClass("clickable");
    }
}).resize();

演示：http://jsfiddle.net/RpA9W/

在调整大小脚本内部时取消Jquery悬停调用

2 个答案: