Question

我一直在努力为我继承的主要项目的子菜单添加延迟。经过大约10个小时的尝试和失败，我真的可以使用一些帮助。我知道有几百个例子用于使用jQuery甚至Javascript在子菜单上添加延迟，但是我还没有看到一个在这个模块化代码结构中工作的例子，我在各处搜索了类似的例子。

我想在没有主要模块重写的情况下尝试这样做，因为这是一个响应式网站，我不确定更改模块的工作方式是否会对功能产生负面影响。

以下是下面的代码，它只是一系列UI函数中的一个函数：

MLS.ui = { ...

tabs: function (element, hover) {
    var scope = element,
        $contentTabs = $jQ(scope + ' > .tab-content > .tab'),
        activeClass = 'active';



    $jQ(scope + ' > .tab-menu > .tab').each(function (i, el) {
        $jQ(this).add($contentTabs[i]).attr('tab', i + 1);
    });

    $jQ(scope + ' > .tab-menu > .tab').on((hover ? 'mouseenter' : 'click'), function (e) {
        if (!hover) {
            e.preventDefault();
        }

        var tab = $jQ(this).attr('tab');
        $jQ(scope + ' > .tab-menu > .tab').add(scope + ' > .tab-content > .tab').removeClass(activeClass);
        $jQ(this).add(scope + ' > .tab-content > .tab[tab=' + tab + ']').addClass(activeClass);
    });

    $jQ(scope + ' > .tab-menu > .tab:first-child').add(scope + ' > .tab-content > .tab:first-child').addClass(activeClass);
},

...}

据我所知，.on事件处理程序正在添加类'active'，并将其从不再悬停的元素中删除，但我不明白这是怎么回事。

我尝试过的一些事情是在整个tabs函数周围添加一个setTimeout，在.on事件处理程序上设置一个延迟和队列，甚至编写一个单独的模块，其中没有任何效果（或不正确的效果），例如，即使我仍悬停在元素上，也会触发removeClass事件。）

我在这里缺少什么？我不能再浪费时间在这个问题上。

编辑：这是我尝试过的一个例子，但它只是在一个li的悬停时将类添加到每个匹配的DOM元素。我怎样才能将单个悬停元素作为延迟来移除活动类？

    tabs: function (element, hover) {
    var scope = element,
        $contentTabs = $jQ(scope + ' > .tab-content > .tab'),
        activeClass = 'active';

    $jQ(scope + ' > .tab-menu > .tab').each(function (i, el) {
        $jQ(this).add($contentTabs[i]).attr('tab', i + 1);
    });

    $jQ(scope + ' > .tab-menu > .tab').on((hover ? 'mouseenter' : 'click'), function (e) {
        if (!hover) {
            e.preventDefault();
        }

        var tab = $jQ(this).attr('tab');
        $jQ(this).add(scope + ' > .tab-content > .tab[tab=' + tab + ']').delay(900).queue(function () {
            $jQ(scope + ' > .tab-menu > .tab').addClass(activeClass);
            $jQ(this).unqueue();
        });
    });

    $jQ(scope + ' > .tab-menu > .tab').on('mouseleave', function (e) {
        if (!hover) {
            e.preventDefault();
        }

        var tab = $jQ(this);
        $jQ(scope + ' > .tab-menu > .tab').add(scope + ' > .tab-content > .tab').delay(1000).queue(function () {
            $jQ(scope + ' > .tab-menu > .tab').removeClass(activeClass);
            $jQ(this).unqueue();
        });

    });

    $jQ(scope + ' > .tab-menu > .tab:first-child').add(scope + ' > .tab-content > .tab:first-child').addClass(activeClass);
},

mouseOut上的jQuery子菜单延迟

0 个答案: