时间戳

首页 > 解决方案 > 在扩展另一个之前折叠手风琴分支？

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

问题描述

我一直在研究别人的有手风琴的网页。

他们相关的 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>

标签： javascriptjquerycssaccordion

解决方案

尝试使用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");
    });

  });
});

推荐阅读