fadeIn在悬停时工作,但在单击/单击时不工作

fadeIn working on hover but not onClick/click

本文关键字:单击 工作 fadeIn 悬停      更新时间:2024-01-20

显示子列表项会在hover()上淡入,但不会在click()onclick()上淡入。http://jsfiddle.net/gymbry/mgMK4/

最简单的解决方案:

$('ul li').click(function (e) { //  jQuery click event. The "e" is the "event" argument
    e.stopPropagation();    //  prevents a parent elements "click" event from fireing (useul here since this asigns to inner li's as well)
    var ul = $(this).children('ul');    //  find any children "ul" in this li
    //  check if ul exist and toggle (not completely neccesary as jquery will simply preform no action if element is not found)
    if (ul.length) ul.fadeToggle('fast');
});

工作示例


$('ul li').click(function (e) { //  jQuery click event. The "e" is the "event" argument
    e.stopPropagation();    //  prevents a parent elements "click" event from fireing (useul here since this asigns to inner li's as well)
    var ul = $(this).children('ul');    //  find any children "ul" in this li
    if (ul.length) {    //  check if ul exist
        if (ul.is(':visible')) {    //  check ul is visible
            ul.fadeOut('fast');
        }
        else {
            ul.fadeIn('fast');
        }
    }
});

示例2


请记住,上述解决方案不处理关闭时打开的同级菜单或更深层次的菜单。要获得更完整的解决方案,请尝试以下操作:

$('ul li').click(function (e) {
    e.stopPropagation();
    var ul = $(this).children('ul');
    $(this).siblings().each(function(i) {
        var ul = $(this).children('ul');
        if (ul.length) if (ul.is(':visible')) {
            ul.find('ul').fadeOut('fast');
            ul.fadeOut('fast');
        }
    });
    if (ul.length) {
        if (ul.is(':visible')) {
            ul.find('ul').fadeOut('fast');
            ul.fadeOut('fast');
        }
        else ul.fadeIn('fast');
    }
});

示例3