Question

我有这段代码：

$('.navigation a').on('click', function() {

        $('.navigation').mouseleave(function() {
            $('.navigation a').not('.bold').delay(2000).animate({opacity : 0}, 800, (function(){
                $(this).css({'visibility': 'hidden'});
            }));
        });

        $('.navigation').mouseenter(function() {
            $('.navigation a').css({visibility: 'visible'});
            $('.navigation a').animate({opacity : 1}, 800);
            console.log('asdfasd');
        });
});

html：

<div class="navigation">
    <p class="header">BLANC+ENÇENS</p>
    <ul class="list">
        <li><a alt="BLANC+ENÇENS PROFILE" href="/profile">BLANC+ENÇENS PROFILE</a></li>
        <li><a alt="BLANC+ENÇENS SERVICES" class="on2" href="/services">BLANC+ENÇENS SERVICES</a>
            <ul class="hide sub first list">
                <li class="long"><a alt="BRAND CONSULTATIONS & STRATEGY" class="keep" href="/consultations">BRAND CONSULTATIONS & STRATEGY</a></li>
                <li><a alt="STRATEGIC PARTNERSHIPS" href="/partnerships">STRATEGIC PARTNERSHIPS</a></li>
                <li><a alt="INVESTMENT" href="/investment">INVESTMENT</a></li>
                <li><a alt="SALES" href="/sales">SALES</a></li>
                <li><a alt="PR" href="/pr">PR</a></li>
            </ul>
        </li>   
        <li><a alt="BLANC+ENÇENS INSTRUCTION" class="on" href="/instruction">BLANC+ENÇENS INSTRUCTION</a>
            <ul class="hide sub first right list">
                <li class="long2"><a alt="LEGAL TERMS" class="keep" href="/terms">LEGAL TERMS</a></li>
                <li><a alt="IMPRINT" href="/imprint">IMPRINT</a></li>
                <li><a alt="DOWNLOAD" href="/download">DOWNLOAD</a></li>
            </ul>
        </li>   
        <li><a alt="EFLÈ . FERDLÈ" href="/efleferdle">EFLÈ . FERDLÈ</a></li>
    </ul>

    <ul class="animate list">
        <li><a alt="FASHION" href="/fashion">FASHION</a>
            <ul class="hide sub fashion list">
                <li><a alt="BROWNIE AND BLONDIE" href="/brownieandblondie">BROWNIE AND BLONDIE</a></li>
                <li><a alt="DIETRICH EMTER" href="/dietrichemter">DIETRICH EMTER</a></li>
                <li><a alt="LEVER COUTURE" href="/levercouture">LEVER COUTURE</a></li>
                <li><a alt="OLIVER RUUGER" href="/oliverruuger">OLIVER RUUGER</a></li>
            </ul>
        </li>
        <li><a alt="LUXURY" href="/luxury">LUXURY</a></li>
        <li><a alt="ART" href="/art">ART</a></li>
    </ul>

    <ul class="animate list lower">
        <li><a alt="INVESTORS" href="/investors">INVESTORS</a></li>
        <li><a alt="NEWS" href="/news">NEWS</a></li>
        <li><a alt="CONTACT" href="/contact">CONTACT</a></li>
    </ul>
</div>

当我点击一次，代码有效，在第二次点击后，.mouseenter功能.animate()和.css()不再有效，但console.log()运行。为什么呢？

在此处查看示例：http://liebdich.biz/。

Answer 1

每次单击时，都会为mouseenter和mouseleave添加事件处理程序的新副本，以便您可以同时运行多个副本。这将导致问题。

如果您描述了您要实现的目标并显示相关的HTML，我们可能会建议您采用正确的方法。

如果您只想在第一次点击时启动该行为，那么您可以这样做：

$('.navigation a').on('click', function() {

    // get the navigation parent
    var parent = $(this).closest('.navigation');

    // check to see if the event handlers have already been installed
    if (!parent.data("handlersInstalled")) {
        parent.mouseleave(function() {
            $('.navigation a').not('.bold').stop(true).delay(2000).animate({opacity : 0}, 800, function(){
                $(this).css({'visibility': 'hidden'});
            });
        }).mouseenter(function() {
            $('.navigation a').css({visibility: 'visible'});
            $('.navigation a').stop(true).animate({opacity : 1}, 800);
            console.log('asdfasd');
        });
        // mark that we've installed handlers
        parent.data("handlersInstalled", true);
    }
});

我在这里做了几处修改：

事件处理程序仅在每个对象上安装一次
它们仅安装在我们点击的项目的父项上（并非安装在apge中的所有项目）
我在动画中添加了.stop()，因此如果快速移动鼠标，动画就不会堆积起来
使用事件链接在同一个jQuery对象上调用多个方法

第二次单击后jQuery不运行函数（animate，css）但是console.log有效吗？

1 个答案: