javascript - JS 插件在页面上不需要时会中断其他脚本

Question

我正在为我的响应式导航使用插件（http://responsive-nav.com）。该插件效果很好，我遇到的问题是每个页面上都没有导航。在这种情况下，我注意到其他 javascript 没有加载，并且在引用“responsive-nav.js”时出现错误：

未捕获的错误：您尝试选择的导航元素不存在

这是我在 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 语句”中。

这是我们最终使用的：

$(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');
            }
        });
    }
});

简单的。奇迹般有效 ：）