Question

我使用带有大量嵌入式jQuery的模板构建网站，但遇到了turbolink和事件无法正常启动的问题。

我的代码如下：

info split

处理折叠菜单。该函数使用其他布局助手初始化，具有以下内容：

var uiNav = function() {
    // When a submenu link is clicked
    jQuery('[data-toggle="nav-submenu"]').on('click', function(e){
        // Get link
        var $link = jQuery(this);

        // Get link's parent
        var $parentLi = $link.parent('li');

        if ($parentLi.hasClass('open')) { // If submenu is open, close it..
            $parentLi.removeClass('open');
        } else { // .. else if submenu is closed, close all other (same level) submenus first before open it
            $link
                .closest('ul')
                .find('> li')
                .removeClass('open');

            $parentLi
                .addClass('open');
        }

        // Remove focus from submenu link
        if ($lHtml.hasClass('no-focus')) {
            $link.blur();
        }

        return false;
    });
};

App.init只会触发uiNav和其他功能。

此外，我已经让下面的脚本处理向菜单添加适当的类，具体取决于你在应用程序中的位置

jQuery(document).on('page:change', function() {
    if (typeof angular == 'undefined') {
        App.init();
    }
});

现在我正在使用turbolinks，并且在完成所有工作时遇到了大量问题。情况是：

打开navmenu，工作正常，点击链接，点击链接
打开其他菜单，打开正常，点击链接，一切顺利
尝试打开其他菜单。旧的一个打开关闭但没有其他打开，脚本不再做任何事情。

知道我在这里做错了什么吗？我想的只是放弃了turbolinks，但我非常喜欢顺利过渡。

Answer 1

管理最终解决它。在初始化函数中添加了一些console.log来查看它正在做什么。原来它发射3次，5次，7次等等......

解决方案是将初始化程序更改为以下内容：

jQuery(document).on('ready page:change', function() {
    if (typeof angular == 'undefined') {
        App.init();
    }
    jQuery(document).off('page:change')
});

此外，脚本还将类添加到：

$(document).on('ready page:change', function() {
    var url = window.location.pathname;
    $('[href="' + url + '"]').closest("ul").parent().addClass("open");
    $('[href="' + url + '"]').addClass("active");
});

Turbolinks和事件没有正常发射

1 个答案: