Question

我有以下代码用于下拉菜单菜单列表：

jQuery(window).ready(function(){

    var timeoutId;
    jQuery('.menuSwitch .menu li').hover(function() {
        if (!timeoutId) {
            timeoutId = window.setTimeout(function() {
                timeoutId = null;
                jQuery(this).children('ul').delay(20).slideDown(200, 'easeInQuad');
           }.bind(this), 200);
        }
    },

    function () {
        if (timeoutId) {
            window.clearTimeout(timeoutId);
            timeoutId = null;
        }
        else {
           jQuery(this).children('ul').delay(20).slideUp(200);
        }
    });

});

然后，我正在切换菜单Nav的父类，因此这个下拉列表不适用于小屏幕：

jQuery(window).resize(function(){   
    if (jQuery(".show-on-small").css("display") == "block" ){
        jQuery('.menuSwitch').switchClass('menuSwitch','menuMobile');
    }
});

然而，动画似乎仍在继续工作。这是简短的HTML：

<a href="#" id="menuToggler" class="show-on-small">Menu</a><div class="menuSwitch"><jdoc:include type="modules" name="kn_above_header"  style="xhtml" /></div></a></nav></div></div>

所以，.menuSwitch确实切换到.menuMobile，但第一个功能仍然保持工作，即使它只适用于.menuSwitch的孩子。我在这里做错了什么？

Answer 1

它仍然在发生，因为您将事件直接附加到元素。当课程改变时，事件不会被删除。

您可以使用事件委派来绕过它或在悬停代码中添加一个检查以查看您所处的状态。

事件分组解决方案：

如果您进行了活动委派，则必须使用.on("mouseeneter")和.on("mouseleave")，因为没有.on("hover")。

$(document /* or closer parent element */)
    .on("mouseenter", ".menuSwitch .menu li", function() {console.log("mouse enter"}; /*hover enter here */})
    .on("mouseleave", ".menuSwitch .menu li", function() {console.log("mouse leave"}; /*hover leave here */});

修改当前代码的解决方案

或者，如果您想保持悬停状态，则需要在当前代码中添加一个检查，以查看您有机添加的课程是否存在。

if (!timeoutId && $(this).closest(".menuSwitch").length) {

您可能还需要更改mouseleave代码。

菜单无效的jQuery开关类

1 个答案: