Question

我正在撰写此页https://www.hawaiidiscount.com/oahu/luaus/germaines.htm

上的手风琴风格标签

当我离线测试时，它可以正常工作但不能在DNN上运行。看它说视频的位置。这会在您单击时折叠选项卡。当您使用小型设备看到它时，默认情况下会折叠它，当您单击它时它会展开。我的js代码是：

// Includes Everything
$(document).ready(function() {
    // level 1

    $(".arrow-right").hide();

    $(".LuauPackages").on("mouseover", function() {
        // Mouse Pointer
        $(".LuauPackages").css( { cursor: "pointer" } );

    });


    $(".LuauPackages").on("click", function() {
        if( $(this).parent().find(".LuauPackCont").is(":visible") ) {
            $(this).parent().find(".LuauPackCont").slideUp("fast");
            $(this).parent().find(".arrow").removeClass("arrow-down").addClass("arrow-right");
            } else {
            $(this).parent().find(".LuauPackCont").slideDown("fast");
            $(this).parent().find(".arrow").removeClass("arrow-right").addClass("arrow-down");
        }
    });


    // this is if window is greater than or equal to 736px
    if( $(window).width() <= 736 ) {
        $(".LuauPackCont").hide();
        $(".arrow-right").show();
        $(".arrow-down").hide();
    }
});

我会很感激任何可能出错的提示。谢谢！

更新：代码在内联时工作正常，但是当我把它放在外部脚本文件中时它不起作用。

Answer 1

我无法评论，因为我没有足够的声誉，但我注意到你使用$（this）很多。只是一个提示，将对象存储在变量中一次更清洁，更有效，然后使用它。每次使用$（this）时，它都是一个创建新JQuery对象的函数。我已经修改了下面的部分代码来反映这一点。我希望这会有所帮助。

$(".LuauPackages").on("click", function() {
    var $this = $(this).parent(); // Caches JQuery object

    if( $this.find(".LuauPackCont").is(":visible") ) {
          $this.find(".LuauPackCont").slideUp("fast");
          $this.find(".arrow").removeClass("arrow-down").addClass("arrow-right");
        } else {
          $this.find(".LuauPackCont").slideDown("fast");
          $this.find(".arrow").removeClass("arrow-right").addClass("arrow-down");
    }
});

Answer 2

我认为您可能想要更改<script>代码的顺序。如果在加载之前有对jQuery或jQuery-UI的引用，那么您将收到错误。尝试按以下方式订购<script>代码：

的jQuery
jQuery的UI
您的JavaScript文件

这是我在您网站上看到的内容：

<script src="/Portals/0/Skins/HD-custom-design-s/Nav/jquery.min.js"></script>
<script src="/Portals/0/Skins/HD-custom-design-s/Nav/mobile-menu.js"></script>
<script src="/Portals/0/Skins/HD-custom-design-s/js/contentslider.js"></script>
<script src="/Portals/0/Skins/HD-custom-design-s/js/jquery.colorbox.js"></script>
<script src="/Portals/0/Skins/HD-custom-design-s/js/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

看起来你的JS文件后面加载了jQuery和jQuery-UI文件。

在Chrome devtools中，我看到您的网站显示此错误（正如Jeremy指出的那样）：

未捕获的TypeError：$（...）。colorbox不是函数

您可能遇到与此帖相同的问题：

JQuery and Colorbox loaded but "colorbox is not a function"

折叠/展开手风琴菜单

2 个答案: