在擴展另一個之前折疊科迪亞分支？

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