Javascript 折叠/展开手风琴菜单

我正在处理此页上的手风琴样式选项卡

当我离线测试时，它可以工作，但不能在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();
    }
});

//包含所有内容
$（文档）.ready（函数（）{
//一级
$（“.arrow right”）.hide（）；
$（.LuauPackages”）.on（“mouseover”，function（）{
//鼠标指针
$（“.LuauPackages”）.css（{cursor:“pointer”}）；
});
$（“.LuauPackages”）。在（“单击”，函数（）{
如果（$（this）.parent（）.find（“.LuauPackCont”）。是（“：可见”））{
$（this.parent（）.find（“.LuauPackCont”）.slideUp（“fast”）；
$（this.parent（）.find（“.arrow”）.removeClass（“arrow down”）.addClass（“arrow right”）；
}否则{
$（this.parent（）.find（“.LuauPackCont”）.slideDown（“fast”）；
$（this.parent（）.find（“.arrow”）.removeClass（“arrow right”）.addClass（“arrow down”）；
}
});
//这是若窗口大于或等于736px
if（$（window）.width（）我不能评论，因为我没有足够的声誉，但我注意到您经常使用$（这个）。只是一个提示，将对象存储在变量中一次，然后改用它更干净、更有效。每次使用$（这个）这是一个创建新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");
    }
});

我认为您可能需要更改
标记的顺序。如果在加载之前有对jQuery或jQuery UI的引用，则会出现错误。请尝试按如下方式对
标记进行排序：

jQuery
jQuery用户界面
您可以使用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开发工具中，我看到您的站点显示了这个错误（正如Jeremy指出的）：

未捕获的TypeError:$（…）。colorbox不是函数

您可能遇到与本文相同的问题：

您的隐藏和显示应该通过CSS中的媒体查询来处理。您的悬停状态（
光标：指针；
）应该通过CSS来处理。控制台显示
未捕获类型错误：$（…）。colorbox不是一个函数
。这会在
$（文档）之后立即中断您的代码.ready
。你能展示一下你是如何包含外部脚本文件的吗？@Tony好的，只要访问网站并检查代码就可以了。有很多（很多……）包含JS文件。@JeremyThille我想这就是重点。人们可能不会去挖掘试图找到包含上述代码的文件，如果它与答案相关，那么它将对未来的访问者有所帮助。为什么停止使用
$（this）
？Cache
$（this）.parent（）
，这将进一步优化代码。甚至
$this.parent（）.find（“.LuauPackCont”）
，它被调用了三次。您应该将
$this
重命名为
$parent
，因为它不再是
这个
，而是它的父项…变得复杂了（嗯？：）