折叠/展开手风琴菜单答案

【问题标题】：Collapse / Expand accordion menu折叠/展开手风琴菜单
【发布时间】：2016-01-06 20:44:23
【问题描述】：

我正在处理此页面上的手风琴样式标签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();
    }
});

如果有任何问题，我将不胜感激。谢谢！

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

【问题讨论】：

您的隐藏和显示应该通过 CSS 中的媒体查询来处理。你的悬停状态 (cursor: pointer;) 也应该由 CSS 处理
控制台显示Uncaught TypeError: $(...).colorbox is not a function。这会在$(document).ready 之后立即破坏您的代码。
你能说明你是如何包含外部脚本文件的吗？
@Tony 好吧，只需访问该站点并检查代码。包含很多（很多.......）JS文件。
@JeremyTille 我想这就是重点。人们可能不会去挖掘试图找到哪个文件包含上面的代码，如果它与答案相关，那么它将对未来的访问者有所帮助。

标签： javascript jquery css

【解决方案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");
    }
});

【讨论】：

为什么要停止$(this)？缓存$(this).parent()，这将进一步优化代码。甚至$this.parent().find(".LuauPackCont")，也被调用了三遍。
您应该将$this 重命名为$parent，因为它不再是this，而是它的父级...变得复杂嗯？ :)

【解决方案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 指出的那样）：

未捕获的类型错误：$(...).colorbox 不是函数

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

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

【讨论】：