mouseOut上的jQuery子菜单延迟

时间:2013-10-20 05:15:53

标签: javascript jquery timer navigation

我一直在努力为我继承的主要项目的子菜单添加延迟。经过大约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);
},

0 个答案:

没有答案