1

因此，我试图在我的网站http://www.beautracare.com/上为购物车制作下拉菜单，到目前为止，如果我将鼠标悬停在购物车上，您会看到下拉菜单淡入，但过了一会儿它会超时即使您仍然将鼠标悬停在购物车下拉菜单上，也会淡出。我尝试创建一个 setTimeout 并在将鼠标悬停在下拉菜单上时将其清除，但它没有响应。我还尝试在 Jquery 中使用下拉悬停功能，但它似乎并没有触发。请帮忙，谢谢。jQuery代码如下：

jQuery(document).ready(function() {
    var timer;
    //get all link with class panel
    $('a.panel').click(function () {

                //reset and highlight the clicked link
        $('a.panel').removeClass('selected');
        $(this).addClass('selected');

        //grab the current item, to be used in resize function
        current = $(this);

                //scroll it to the destination
        $('#wrapper').scrollTo($(this).attr('href'), 800);      

                //cancel the link default behavior
        return false;
    });

    $('.wsite-nav-cart').hover(
        function() {
            if ($("#wsite-mini-cart").css("display") == 'none'){
                $("#wsite-mini-cart").fadeIn();
                timer = window.setTimeout(function() {$("#wsite-mini-cart").fadeOut(); }, 1500);
            }
        }, function() {
        }
    );

    $("#wsite-mini-cart").hover(
        function() {
             if (timer) {
                window.clearTimeout(timer);
            } 
            $("#wsite-mini-cart").css({'display':'block','opacity':1});
        }, function() {
            timer = window.setTimeout(function() {$("#wsite-mini-cart").fadeOut(); }, 1500);
        }
    );


    $('.wsite-nav-cart').click(function () {
        if ( $(this).attr("id")){
            $("#wsite-mini-cart").fadeOut();
            $(this).removeAttr('id');
        } else {
            $("#wsite-mini-cart").fadeIn();
            $(this).attr('id', 'active');
        }
        //cancel the link default behavior
        return false;
    });
4

1 回答 1

2

我做了一个小jsfiddle来展示我将如何解决这个问题。如果您将鼠标悬停在按钮上，则会显示购物车。如果您将鼠标移出按钮，则购物车将隐藏。但如果你移到购物车上，它会一直可见，直到你离开它。

基本上，hideCart延迟了 500 毫秒。如果任何绑定元素在此期间收到鼠标悬停，它会取消计时器。

编码：

var hideTimer;

function showCart() {
    $("#mini-cart").fadeIn(1000);
    if (hideTimer) {
        window.clearTimeout(hideTimer);
        hideTimer = null;
    }
}

function hideCart() {
    hideTimer = window.setTimeout(function () {
        $("#mini-cart").fadeOut(1000);
    }, 500);
}

$("#nav-cart,#mini-cart").hover(showCart, hideCart);
于 2014-03-02T20:42:22.070 回答