折叠/展开手风琴菜单

Collapse / Expand accordion menu

本文关键字：手风琴 菜单 折叠      更新时间：2023-09-26

我正在这个页面上制作手风琴风格的选项卡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();
    }
});

如果有任何可能出错的提示，我将不胜感激。谢谢

更新：代码在内联时运行良好，但当我把它放在外部脚本文件中时，它不起作用。

我不能发表评论，因为我没有足够的声誉，但我注意到你经常使用$（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");
    }
});

我认为您可能需要更改<script>标记的顺序。如果在加载jQuery或jQuery UI之前有对它的引用，您将得到一个错误。试着像这样订购<script>标签：

  1. jQuery
  2. jQuery UI
  3. 您的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所指出的）：

未捕获的类型错误：$（…）。colorbox不是函数

你可能会遇到与这篇文章相同的问题：

JQuery和Colorbox已加载；colorbox不是函数"；

相关文章：