1

下面是用于显示和隐藏页脚横幅的代码。除了鼠标悬停外，一切正常。

MouseOver 确实可以工作（并且当触发它时，它会向该区域显示一个突出显示）但是用户在该区域中单击，突出显示会消失，但是当用户退出该区域时，突出显示会闪烁，因为它在单击退出后再次触发。

因此，在同一区域单击后，mouseenter/mouseleave 代码似乎被重置。

即使在单击之后，如何防止再次触发此事件？谢谢你。

// Hide the Footer
$(document).on('click','div#fixedPageFooterShown', function() {hideFooterBanner();});


// Highlight Footer MouseOver
$(document).on('mouseenter','div.fixedPageFooterDisplay', function() {
        $('img.bannerBottomMouseOver').show();
    }).on('mouseleave','div.fixedPageFooterDisplay', function () {
        $('img.bannerBottomMouseOver').hide();
});


// Hide Footer Banner Function
function hideFooterBanner() {
    $('div#fixedPageFooter').fadeOut('fast', function () {
        $('div#fixedPageFooterClosed').fadeIn('fast');
        $('img.bannerBottomMouseOver').fadeOut('fast');
        $('img#footerArrowMin').hide();
        $('img#footerArrowMax').show();
    });
}


// Show Footer Banner Function
$(document).on('click','div#fixedPageFooterClosed', function() {
    $(this).fadeOut('fast', function () {
        $('div#fixedPageFooter').fadeIn('fast');
        $('img.bannerBottomMouseOver').fadeOut('fast');
        $('img#footerArrowMax').hide();
        $('img#footerArrowMin').show();
    });
});
4

1 回答 1

0

我不确定什么不适用，如果您显示 html 布局可以提供更多帮助

我认为您可以使用它 event.preventdefault()来防止默认事件：

// Hide the Footer


// Highlight Footer MouseOver
//i'll change here to be more jquery'ish - not need on() i think as it replacemement for live()

$('div.fixedPageFooterDisplay').bind('mouseenter', function() {
    $('img.bannerBottomMouseOver').show();
}).bind('mouseleave', function() {
    $('img.bannerBottomMouseOver').hide();
});


// Hide Footer Banner Function
var hideFooterBanner = function(event) {
    //prevent default event handler
    if (event !== undefined) {
        event.preventdefault();
    }

    $('div#fixedPageFooter').fadeOut('fast', function() {
        $('div#fixedPageFooterClosed').fadeIn('fast');
        $('img.bannerBottomMouseOver').fadeOut('fast');
        $('img#footerArrowMin').hide();
        $('img#footerArrowMax').show();
    });
};

//i'll change here to be more jquery'ish
$('div#fixedPageFooterShown').click(hideFooterBanner);


// Show Footer Banner Function
//i'll change here to be more jquery'ish
$('div#fixedPageFooterClosed').click(function(event) {

    //prevent default event handler     
    event.preventdefault();

    $(this).fadeOut('fast', function() {
        $('div#fixedPageFooter').fadeIn('fast');
        $('img.bannerBottomMouseOver').fadeOut('fast');
        $('img#footerArrowMax').hide();
        $('img#footerArrowMin').show();
    });
});​
于 2012-10-13T02:51:57.140 回答