0

我一直在努力为我为一个主要项目继承的子菜单添加延迟。经过大约 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 事件处理程序既添加了“活动”类，又将其从不再悬停的元素中删除，但我不明白这是怎么可能的。

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

我在这里想念什么？我不能再在这个问题上浪费时间了。

编辑：这是我尝试过的一个例子，但它只是将类添加到每个匹配的 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);
},
4

0 回答 0