javascript - 在扩展另一个之前折叠 Accordion 分支？

Question

我一直在处理其他人的带有 Accordion 的网页。

他们相关的 JQuery 代码部分是:

 $(document).ready(function () {
            $(".accordion").on("click", ".trigger", function (n) {
                var t, i;
                n.preventDefault();
                t = $(this).parent();
                t.hasClass("open") ? t.find(".content").animate({ height: 0 }, 500, function () { t.removeClass("open") }) :
                    ($(".open .content").animate({ height: 0 }, 500, function () { $(this).parents(".open").removeClass("open") }),
                        i = t.find(".inner").height(), t.find(".content").animate({ height: i }, 500, function () { t.addClass("open"); $(this).height("auto") }))
            })
        });

我知道我还没有上传 HTML(有很多)但我希望有人可以告诉我如何修改 jQuery 代码，以便任何打开的分支在点击的分支打开之前折叠(只有一个是目前允许一次开放)。

目前，因为分支包含大量图像和文本，所以新分支不会在其内容的顶部打开，而是在例如一半的位置打开。我可以看到，如果我先手动折叠之前打开的分支然后打开新分支，一切看起来都很好。所以我想如果可以更改代码以先关闭旧分支，它会使新分支内容的滚动位置正确地位于其顶部。

更新 1:这是第一个分支的 HTML 摘录，该分支在页面加载时打开并包含一个视频。

<ul class="accordion">
                <!-- Question 1 Start -->
                <li class="open">
                    <div class="trigger dvQuestionTitleTable dvQuestion1 dvQuestionAlignment">
                        <div id="dvIDQuestion1" class="dvQuestionTitleRow" onclick="fJTogglePlusMinus(1)">
                            <div class="theme-agent-heading-sub dvQuestionTitleTextCell">
                                Video
                            </div>
                            <div id="dvIDPlusMinusImage1" class="dvQuestionTitleImageCell">
                                <img id="Image1" src="../../common/images/icons/icon-help-minus.svg" class="imgMinus">
                            </div>
                        </div>
                    </div>
                    <div class="dvTopHorizontalLineArea">
                        <div class="dvHRLine">
                        </div>
                    </div>
                    <div class="content">
                        <div class="inner">
                            <div class="theme-help-answer">
                                <div class="dvVideoContainer1">
                                    <video loop="" playsinline="" id="Video100" width="100%" controls="" poster="/pages/agent/resources/video/images/video-100-poster-image.jpg">
                                        <source src="video/video-100.webm" type="video/webm">
                                        <source src="video/video-100.mp4" type="video/mp4">
                                    </video>
                                </div>

Answer 1

尝试使用 slideUp 和 slideDown。此外，可能不需要检查 t.hasClass("open")，因为您的意图是先关闭所有 Accordion 并打开选定的 Accordion 。

$(document).ready(function() {
  $(".accordion").on("click", ".trigger", function(n) {
    var t, i;
    n.preventDefault();
    t = $(this).parent();

    if (t.hasClass("open")) { // check if the el is opened; need to close the el
      t.find(".content").slideUp('fast', function() {
        $(".accordion").removeClass("open")
      });
      return;
    } else {
      $(".open .content").slideUp('fast', function() {
        $(".accordion").removeClass("open")
      });
    }
    t.find(".content").slideDown('fast', function() {
      t.addClass("open");
    });

  });
});