javascript - 折叠/展开 Accordion 菜单

Question

我正在处理此页面上的 Accordion 样式选项卡 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 对象的函数。我已经修改了下面的部分代码以反射(reflect)这一点。我希望这会有所帮助。

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