在扩展另一个分支之前折叠手风琴分支？

Question

我一直在处理其他人的带有手风琴的网页。

他们的相关 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")，因为您的意图是先关闭所有手风琴并打开选定的手风琴。

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

  });
});

Answer 2

测试 - 添加：.delay(500)

    $(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").delay(500).animate({
                    height: i
                }, 500, function() {
                    t.addClass("open");
                    $(this).height("auto")
                }))
    })
});

在扩展另一个分支之前折叠手风琴分支？

Collapse accordian branch before expanding another?

javascript

css

jquery

accordion