JS插件在页面不需要时破坏其他脚本

Question

我正在使用响应式导航插件 (http://responsive-nav.com)。该插件效果很好，我遇到的问题是每个页面上都没有导航。在这种情况下，我注意到其他 javascript 没有加载，并且我在参考 "responsive-nav.js":

时收到错误消息

Uncaught Error: The nav element you are trying to select doesn't exist

这是我在 main.js 文件中加载脚本的方式。

$(function(){

    var navigation = responsiveNav(".site-nav__list", {
        customToggle: "#site-nav__toggle",
        open: function(){
            $("#site-nav__toggle").addClass('open');
        },
        close: function(){
            $("#site-nav__toggle").removeClass('open');
        }
    });
});;

每个页面都会调用该文件 (/js/responsive-nav.js)，但删除它并不能解决问题，注释掉我在上面输入的代码可以解决问题 - 所以我猜它是用那个做什么？

希望有人能帮忙，干杯！

Answer 1

在与插件作者交谈后，他建议我将脚本包装在 'if statement' 中。

这是我们最终使用的：

$(function(){
    if ($(".site-nav__list").length) {
        var navigation = responsiveNav(".site-nav__list", {
            customToggle: "#site-nav__toggle",
            open: function(){
                $("#site-nav__toggle").addClass('open');
            },
            close: function(){
                $("#site-nav__toggle").removeClass('open');
            }
        });
    }
});

简单。很有魅力:)

JS插件在页面不需要时破坏其他脚本

JS plug-in breaks other scripts when not required on page

html

javascript

css

jquery

responsive-nav