当前位置： 文江博客话题详情

手风琴无法正常工作（未应用每个父实例的活动状态）

发布于 2025-01-21 18:42:27 字数 9531 浏览 0 评论 0原文

我有单击，高度增长并将图像更改为与该部分相关的手风琴（这是基于data-id进行的）。

以下是我要达到的要求：

  • 每个手风琴组都包含在中。Accordionrepeater__wrapper，对于该类的每个实例，我都在尝试获得第一个.AccordionCard 。有开放状态。
  • 仅在每个codeionrepeater__wrapper在页面加载上打开的每个.cordioncard ，因此用户默认可以看到一些内容。
  • 在每个AccordionRepeater__wrapper一次打开​​时，只有一个.cordioncard（用户不能有两个或更多coccationcard code> Accordionrepeater __wrapper__wrapper 代码>一次）。

当前结果：

  • 第一个.AccordionCard在第一个中.accordionrepeater__wrapper具有.accordioncard的类。显示内容。
  • .cordionCard的第一个实例。图像。只有当我单击它时，图像和内容显示。

在这里看到我的尝试：

$(function() {

  const card = $(".accordionCard");
  const expand_icon = $(".accordionCard__expand");


  // open first accordion in each .accordionRepeater__wrapper by default
  $(".accordionCard:first accordionCard__expand").addClass("expanded");
  $(".accordionCard:first").addClass("accordionCard--open");
  $(".accordionRepeater__image:first").addClass("d-block");


  card.click(function() {
    var hidden = $(this).children(".accordionCard__body--hidden");

    // only have one card open at a time
    expand_icon.removeClass("expanded");
    card.removeClass("accordionCard--open");

    /* CLOSE CARD */

    if ($(this).hasClass("accordionCard--open")) {
      TweenMax.to(hidden, 0.3, {
        height: 0,
        immediateRender: false,
        ease: Power1.easeOut
      });
      $(this).removeClass("accordionCard--open");
      $(this).find(expand_icon).removeClass("expanded");
    }

    /* OPEN CARD */
    else {
      TweenMax.set(hidden, {
        height: "auto"
      });
      TweenMax.from(hidden, 1, {
        height: 0,
        immediateRender: false,
        ease: Back.easeOut
      });
      $(this).addClass("accordionCard--open");
      $(this).find(expand_icon).addClass("expanded");

      // show correct image
      var id = $(this).attr('data-item');
      $(".accordionRepeater__image").removeClass("d-block");
      $(".accordionRepeater__image[data-item='" + id + "']").addClass("d-block");
    }

    /* END */

  });



});
:root {
  --green: #089F84;
  --white-2: #F7F7F7;
  --black-2: #2C3645;
}

.accordionRepeater {
  padding: 130px 0 156px 0;
}

.accordionRepeater__wrapper {
  padding-bottom: 140px;
}

.accordionRepeater__wrapper:last-child {
  padding-bottom: 0;
}

.accordionRepeater__row--even {
  flex-direction: row-reverse;
}

.accordionRepeater .accordionCard {
  margin: 13px 0;
  cursor: pointer;
  padding-left: 26px;
}

.accordionRepeater .accordionCard:hover .accordionCard__body-label {
  color: var(--green);
}

.accordionRepeater .accordionCard--open {
  background-color: var(--white-2);
  padding: 36px 48px 45px 26px;
  border-radius: 10px;
}

.accordionRepeater .accordionCard__expand {
  position: absolute;
}

.accordionRepeater .accordionCard__expand:before,
.accordionRepeater .accordionCard__expand:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translate(0px, 10px);
  right: 0;
  margin: 0 0 -8px;
  background-color: var(--green);
  border-radius: 5px;
}

.accordionRepeater .accordionCard__expand:before {
  right: 8px;
  width: 3px;
  height: 16px;
  transition: all 0.5s ease;
  margin-top: -7.5px;
}

.accordionRepeater .accordionCard__expand:after {
  right: 1px;
  width: 16px;
  height: 3px;
  margin-top: -1.5px;
}

.accordionRepeater .accordionCard__expand.expanded:before,
.accordionRepeater .accordionCard__expand.expanded:after {
  background-color: var(--black-2);
}

.accordionRepeater .accordionCard__expand.expanded:before {
  height: 0;
  margin-top: 0;
}

.accordionRepeater .accordionCard__body {
  margin-left: 20px;
}

.accordionRepeater .accordionCard__body--visible {
  width: 100%;
}

.accordionRepeater .accordionCard__body--hidden {
  overflow: hidden;
  height: 0;
}

.accordionRepeater .accordionCard__body-label {
  transition: all 0.5s ease;
  margin-left: 20px;
}

.accordionRepeater .accordionCard__body-copy {
  padding: 24px 0 17px 0;
}

.accordionRepeater .accordionCard__body-link {
  transition: none;
}

.accordionRepeater__image {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="accordionRepeater">

  <div class="container">

    <!-----------
     -- FIRST SET
     -------------->

    <div class="accordionRepeater__wrapper">
      <div class="row justify-content-between align-items-center accordionRepeater__row accordionRepeater__row--odd">
        <div class="col-12 col-lg-6">
          <div class="accordionRepeater__text">

            <div class="accordionRepeater__text-accordion">

              <!-- CARD 1 -->

              <div class="accordionCard position-relative d-flex flex-column" data-item="1">
                <div class="accordionCard__body">
                  <div class="accordionCard__expand"></div>
                  <span class="accordionCard__body-label d-block">Lorum</span>
                </div>
                <div class="accordionCard__body--hidden">
                  <div class="accordionCard__body-copy">
                    <p>Lorum ipsum</p>
                  </div>
                </div>
              </div>

              <!-- CARD 2 -->

              <div class="accordionCard position-relative d-flex flex-column" data-item="2">
                <div class="accordionCard__body">
                  <div class="accordionCard__expand"></div>
                  <span class="accordionCard__body-label d-block">Lorum 2</span>
                </div>
                <div class="accordionCard__body--hidden">
                  <div class="accordionCard__body-copy">
                    <p>Lorum ipsum 2</p>
                  </div>
                </div>
              </div>

              <!-- CARD END -->

            </div>
          </div>
        </div>


        <div class="col-12 col-lg-6">
          <div class="accordionRepeater__graphic">
            <img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="1">
            <img class="accordionRepeater__image" src="https://picsum.photos/550" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="2">
            <img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="3">
          </div>
        </div>

      </div>
    </div>

    <!-----------
    -- FIRST SET END
    -------------->

    <!-----------
     -- SECOND SET
     -------------->

    <div class="accordionRepeater__wrapper">
      <div class="row justify-content-between align-items-center accordionRepeater__row accordionRepeater__row--even">
        <div class="col-12 col-lg-6">
          <div class="accordionRepeater__text">

            <div class="accordionRepeater__text-accordion">

              <!-- CARD 1 -->

              <div class="accordionCard position-relative d-flex flex-column" data-item="1">
                <div class="accordionCard__body">
                  <div class="accordionCard__expand"></div>
                  <span class="accordionCard__body-label d-block">Lorum</span>
                </div>
                <div class="accordionCard__body--hidden">
                  <div class="accordionCard__body-copy">
                    <p>Lorum ipsum</p>
                  </div>
                </div>
              </div>

              <!-- CARD END -->

            </div>
          </div>
        </div>


        <div class="col-12 col-lg-6">
          <div class="accordionRepeater__graphic">
            <img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="1">
          </div>
        </div>

      </div>
    </div>

    <!-----------
    -- SECOND SET END
    -------------->

  </div>
</div>

原文

I have accordions which on click, grow in height and also changes the image to what is relevant to that section (this is done based on data-id).

Here are the requirements that I'm trying to achieve:

  • Each accordion group is contained within .accordionRepeater__wrapper and for each instance of that class, I'm trying to get the first .accordionCard. to have the open state.
  • Only have the first .accordionCard in each accordionRepeater__wrapper open on page load, so the user can see some content by default.
  • Only have one .accordionCard in each accordionRepeater__wrapper open at a time (user cannot have two or more accordionCard open in a accordionRepeater__wrapper at one time).

Currently results:

  • The first .accordionCard in the first .accordionRepeater__wrapper has the class of .accordionCard--open on page load, but doesn't show the content for it.
  • The first instance of .accordionCard in the second .accordionRepeater__wrapper doesn't have the class of .accordionCard--open and doesn't show the image. Only when I click on it does the image and content show.

See my attempt here:

$(function() {

  const card = $(".accordionCard");
  const expand_icon = $(".accordionCard__expand");


  // open first accordion in each .accordionRepeater__wrapper by default
  $(".accordionCard:first accordionCard__expand").addClass("expanded");
  $(".accordionCard:first").addClass("accordionCard--open");
  $(".accordionRepeater__image:first").addClass("d-block");


  card.click(function() {
    var hidden = $(this).children(".accordionCard__body--hidden");

    // only have one card open at a time
    expand_icon.removeClass("expanded");
    card.removeClass("accordionCard--open");

    /* CLOSE CARD */

    if ($(this).hasClass("accordionCard--open")) {
      TweenMax.to(hidden, 0.3, {
        height: 0,
        immediateRender: false,
        ease: Power1.easeOut
      });
      $(this).removeClass("accordionCard--open");
      $(this).find(expand_icon).removeClass("expanded");
    }

    /* OPEN CARD */
    else {
      TweenMax.set(hidden, {
        height: "auto"
      });
      TweenMax.from(hidden, 1, {
        height: 0,
        immediateRender: false,
        ease: Back.easeOut
      });
      $(this).addClass("accordionCard--open");
      $(this).find(expand_icon).addClass("expanded");

      // show correct image
      var id = $(this).attr('data-item');
      $(".accordionRepeater__image").removeClass("d-block");
      $(".accordionRepeater__image[data-item='" + id + "']").addClass("d-block");
    }

    /* END */

  });



});
:root {
  --green: #089F84;
  --white-2: #F7F7F7;
  --black-2: #2C3645;
}

.accordionRepeater {
  padding: 130px 0 156px 0;
}

.accordionRepeater__wrapper {
  padding-bottom: 140px;
}

.accordionRepeater__wrapper:last-child {
  padding-bottom: 0;
}

.accordionRepeater__row--even {
  flex-direction: row-reverse;
}

.accordionRepeater .accordionCard {
  margin: 13px 0;
  cursor: pointer;
  padding-left: 26px;
}

.accordionRepeater .accordionCard:hover .accordionCard__body-label {
  color: var(--green);
}

.accordionRepeater .accordionCard--open {
  background-color: var(--white-2);
  padding: 36px 48px 45px 26px;
  border-radius: 10px;
}

.accordionRepeater .accordionCard__expand {
  position: absolute;
}

.accordionRepeater .accordionCard__expand:before,
.accordionRepeater .accordionCard__expand:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translate(0px, 10px);
  right: 0;
  margin: 0 0 -8px;
  background-color: var(--green);
  border-radius: 5px;
}

.accordionRepeater .accordionCard__expand:before {
  right: 8px;
  width: 3px;
  height: 16px;
  transition: all 0.5s ease;
  margin-top: -7.5px;
}

.accordionRepeater .accordionCard__expand:after {
  right: 1px;
  width: 16px;
  height: 3px;
  margin-top: -1.5px;
}

.accordionRepeater .accordionCard__expand.expanded:before,
.accordionRepeater .accordionCard__expand.expanded:after {
  background-color: var(--black-2);
}

.accordionRepeater .accordionCard__expand.expanded:before {
  height: 0;
  margin-top: 0;
}

.accordionRepeater .accordionCard__body {
  margin-left: 20px;
}

.accordionRepeater .accordionCard__body--visible {
  width: 100%;
}

.accordionRepeater .accordionCard__body--hidden {
  overflow: hidden;
  height: 0;
}

.accordionRepeater .accordionCard__body-label {
  transition: all 0.5s ease;
  margin-left: 20px;
}

.accordionRepeater .accordionCard__body-copy {
  padding: 24px 0 17px 0;
}

.accordionRepeater .accordionCard__body-link {
  transition: none;
}

.accordionRepeater__image {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="accordionRepeater">

  <div class="container">

    <!-----------
     -- FIRST SET
     -------------->

    <div class="accordionRepeater__wrapper">
      <div class="row justify-content-between align-items-center accordionRepeater__row accordionRepeater__row--odd">
        <div class="col-12 col-lg-6">
          <div class="accordionRepeater__text">

            <div class="accordionRepeater__text-accordion">

              <!-- CARD 1 -->

              <div class="accordionCard position-relative d-flex flex-column" data-item="1">
                <div class="accordionCard__body">
                  <div class="accordionCard__expand"></div>
                  <span class="accordionCard__body-label d-block">Lorum</span>
                </div>
                <div class="accordionCard__body--hidden">
                  <div class="accordionCard__body-copy">
                    <p>Lorum ipsum</p>
                  </div>
                </div>
              </div>

              <!-- CARD 2 -->

              <div class="accordionCard position-relative d-flex flex-column" data-item="2">
                <div class="accordionCard__body">
                  <div class="accordionCard__expand"></div>
                  <span class="accordionCard__body-label d-block">Lorum 2</span>
                </div>
                <div class="accordionCard__body--hidden">
                  <div class="accordionCard__body-copy">
                    <p>Lorum ipsum 2</p>
                  </div>
                </div>
              </div>

              <!-- CARD END -->

            </div>
          </div>
        </div>


        <div class="col-12 col-lg-6">
          <div class="accordionRepeater__graphic">
            <img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="1">
            <img class="accordionRepeater__image" src="https://picsum.photos/550" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="2">
            <img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="3">
          </div>
        </div>

      </div>
    </div>

    <!-----------
    -- FIRST SET END
    -------------->

    <!-----------
     -- SECOND SET
     -------------->

    <div class="accordionRepeater__wrapper">
      <div class="row justify-content-between align-items-center accordionRepeater__row accordionRepeater__row--even">
        <div class="col-12 col-lg-6">
          <div class="accordionRepeater__text">

            <div class="accordionRepeater__text-accordion">

              <!-- CARD 1 -->

              <div class="accordionCard position-relative d-flex flex-column" data-item="1">
                <div class="accordionCard__body">
                  <div class="accordionCard__expand"></div>
                  <span class="accordionCard__body-label d-block">Lorum</span>
                </div>
                <div class="accordionCard__body--hidden">
                  <div class="accordionCard__body-copy">
                    <p>Lorum ipsum</p>
                  </div>
                </div>
              </div>

              <!-- CARD END -->

            </div>
          </div>
        </div>


        <div class="col-12 col-lg-6">
          <div class="accordionRepeater__graphic">
            <img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="1">
          </div>
        </div>

      </div>
    </div>

    <!-----------
    -- SECOND SET END
    -------------->

  </div>
</div>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

一百个冬季 2025-01-28 18:42:27

您没有在开始时扩展手风琴。您仅在单击时才进行。
此外，该方法需要处理扩展并在设定级别上关闭。而不是全球。

可以这样完成：

$(function() {
  const card = $('.accordionCard');
  const expand_icon = $('.accordionCard__expand');

  $('.accordionCard:first-child').each((i, a) => toggleAc(a));

  card.click(function() {
    toggleAc(this);
  });

  // expand/close given accordions
  function toggleAc(acdn) {
    var hidden = $(acdn).children('.accordionCard__body--hidden');
    const isOpen = $(acdn).hasClass('accordionCard--open');

    /* CLOSE CARD */
    if (isOpen) {
      return;  // this ensures that at least one will remain open all the time
      /*TweenMax.to(hidden, 0.3, {
        height: 0,
        immediateRender: false,
        ease: Power1.easeOut,
      });
      $(acdn).removeClass('accordionCard--open');
      $(acdn).find(expand_icon).removeClass('expanded');
      */
      
    } else {
      // close previous card in the same set
      const parent = $(acdn).parent();
      const expandedCard = parent.find('.accordionCard--open');
      const expandedIcon = parent.find('.expanded');
      const expandedCardHidden = expandedCard.children('.accordionCard__body--hidden');
      TweenMax.to(expandedCardHidden, 0.3, {
        height: 0,
        immediateRender: false,
        ease: Power1.easeOut,
      });
      expandedIcon.removeClass('expanded');
      expandedCard.removeClass('accordionCard--open');

      /* OPEN CARD */
      TweenMax.set(hidden, {
        height: 'auto',
      });
      TweenMax.from(hidden, 1, {
        height: 0,
        immediateRender: false,
        ease: Back.easeOut,
      });
      $(acdn).addClass('accordionCard--open');
      $(acdn).find(expand_icon).addClass('expanded');

      // show correct image
      var id = $(acdn).attr('data-item');
      const grandParent = parent.parent().parent().parent();
      grandParent.find('.accordionRepeater__image').removeClass('d-block');
      grandParent
        .find(".accordionRepeater__image[data-item='" + id + "']")
        .addClass('d-block');
    }

    /* END */
  }
});
:root {
  --green: #089f84;
  --white-2: #f7f7f7;
  --black-2: #2c3645;
}

.accordionRepeater {
  padding: 130px 0 156px 0;
}

.accordionRepeater__wrapper {
  padding-bottom: 140px;
}

.accordionRepeater__wrapper:last-child {
  padding-bottom: 0;
}

.accordionRepeater__row--even {
  flex-direction: row-reverse;
}

.accordionRepeater .accordionCard {
  margin: 13px 0;
  cursor: pointer;
  padding-left: 26px;
}

.accordionRepeater .accordionCard:hover .accordionCard__body-label {
  color: var(--green);
}

.accordionRepeater .accordionCard--open {
  background-color: var(--white-2);
  padding: 36px 48px 45px 26px;
  border-radius: 10px;
}

.accordionRepeater .accordionCard__expand {
  position: absolute;
}

.accordionRepeater .accordionCard__expand:before,
.accordionRepeater .accordionCard__expand:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  transform: translate(0px, 10px);
  right: 0;
  margin: 0 0 -8px;
  background-color: var(--green);
  border-radius: 5px;
}

.accordionRepeater .accordionCard__expand:before {
  right: 8px;
  width: 3px;
  height: 16px;
  transition: all 0.5s ease;
  margin-top: -7.5px;
}

.accordionRepeater .accordionCard__expand:after {
  right: 1px;
  width: 16px;
  height: 3px;
  margin-top: -1.5px;
}

.accordionRepeater .accordionCard__expand.expanded:before,
.accordionRepeater .accordionCard__expand.expanded:after {
  background-color: var(--black-2);
}

.accordionRepeater .accordionCard__expand.expanded:before {
  height: 0;
  margin-top: 0;
}

.accordionRepeater .accordionCard__body {
  margin-left: 20px;
}

.accordionRepeater .accordionCard__body--visible {
  width: 100%;
}

.accordionRepeater .accordionCard__body--hidden {
  overflow: hidden;
  height: 0;
}

.accordionRepeater .accordionCard__body-label {
  transition: all 0.5s ease;
  margin-left: 20px;
}

.accordionRepeater .accordionCard__body-copy {
  padding: 24px 0 17px 0;
}

.accordionRepeater .accordionCard__body-link {
  transition: none;
}

.accordionRepeater__image {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />

<div class="accordionRepeater">
  <div class="container">
    <!-----------
     -- FIRST SET
     -------------->

    <div class="accordionRepeater__wrapper">
      <div class="row justify-content-between align-items-center accordionRepeater__row accordionRepeater__row--odd">
        <div class="col-12 col-lg-6">
          <div class="accordionRepeater__text">
            <div class="accordionRepeater__text-accordion">
              <!-- CARD 1 -->

              <div class="accordionCard position-relative d-flex flex-column" data-item="1">
                <div class="accordionCard__body">
                  <div class="accordionCard__expand"></div>
                  <span class="accordionCard__body-label d-block">Lorum</span>
                </div>
                <div class="accordionCard__body--hidden">
                  <div class="accordionCard__body-copy">
                    <p>Lorum ipsum</p>
                  </div>
                </div>
              </div>

              <!-- CARD 2 -->

              <div class="accordionCard position-relative d-flex flex-column" data-item="2">
                <div class="accordionCard__body">
                  <div class="accordionCard__expand"></div>
                  <span class="accordionCard__body-label d-block">Lorum 2</span>
                </div>
                <div class="accordionCard__body--hidden">
                  <div class="accordionCard__body-copy">
                    <p>Lorum ipsum 2</p>
                  </div>
                </div>
              </div>

              <!-- CARD END -->
            </div>
          </div>
        </div>

        <div class="col-12 col-lg-6">
          <div class="accordionRepeater__graphic">
            <img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="1" />
            <img class="accordionRepeater__image" src="https://picsum.photos/550" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="2" />
            <img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="3" />
          </div>
        </div>
      </div>
    </div>

    <!-----------
    -- FIRST SET END
    -------------->

    <!-----------
     -- SECOND SET
     -------------->

    <div class="accordionRepeater__wrapper">
      <div class="row justify-content-between align-items-center accordionRepeater__row accordionRepeater__row--even">
        <div class="col-12 col-lg-6">
          <div class="accordionRepeater__text">
            <div class="accordionRepeater__text-accordion">
              <!-- CARD 1 -->

              <div class="accordionCard position-relative d-flex flex-column" data-item="1">
                <div class="accordionCard__body">
                  <div class="accordionCard__expand"></div>
                  <span class="accordionCard__body-label d-block">Lorum</span>
                </div>
                <div class="accordionCard__body--hidden">
                  <div class="accordionCard__body-copy">
                    <p>Lorum ipsum</p>
                  </div>
                </div>
              </div>

              <!-- CARD END -->
            </div>
          </div>
        </div>

        <div class="col-12 col-lg-6">
          <div class="accordionRepeater__graphic">
            <img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="1" />
          </div>
        </div>
      </div>
    </div>

    <!-----------
    -- SECOND SET END
    -------------->
  </div>
</div>

You are not expanding the accordions at the start. You are doing it only on click.
Also the method needs to handle expansion and close at set level. And not globally.

It can be done like this:

$(function() {
  const card = $('.accordionCard');
  const expand_icon = $('.accordionCard__expand');

  $('.accordionCard:first-child').each((i, a) => toggleAc(a));

  card.click(function() {
    toggleAc(this);
  });

  // expand/close given accordions
  function toggleAc(acdn) {
    var hidden = $(acdn).children('.accordionCard__body--hidden');
    const isOpen = $(acdn).hasClass('accordionCard--open');

    /* CLOSE CARD */
    if (isOpen) {
      return;  // this ensures that at least one will remain open all the time
      /*TweenMax.to(hidden, 0.3, {
        height: 0,
        immediateRender: false,
        ease: Power1.easeOut,
      });
      $(acdn).removeClass('accordionCard--open');
      $(acdn).find(expand_icon).removeClass('expanded');
      */
      
    } else {
      // close previous card in the same set
      const parent = $(acdn).parent();
      const expandedCard = parent.find('.accordionCard--open');
      const expandedIcon = parent.find('.expanded');
      const expandedCardHidden = expandedCard.children('.accordionCard__body--hidden');
      TweenMax.to(expandedCardHidden, 0.3, {
        height: 0,
        immediateRender: false,
        ease: Power1.easeOut,
      });
      expandedIcon.removeClass('expanded');
      expandedCard.removeClass('accordionCard--open');

      /* OPEN CARD */
      TweenMax.set(hidden, {
        height: 'auto',
      });
      TweenMax.from(hidden, 1, {
        height: 0,
        immediateRender: false,
        ease: Back.easeOut,
      });
      $(acdn).addClass('accordionCard--open');
      $(acdn).find(expand_icon).addClass('expanded');

      // show correct image
      var id = $(acdn).attr('data-item');
      const grandParent = parent.parent().parent().parent();
      grandParent.find('.accordionRepeater__image').removeClass('d-block');
      grandParent
        .find(".accordionRepeater__image[data-item='" + id + "']")
        .addClass('d-block');
    }

    /* END */
  }
});
:root {
  --green: #089f84;
  --white-2: #f7f7f7;
  --black-2: #2c3645;
}

.accordionRepeater {
  padding: 130px 0 156px 0;
}

.accordionRepeater__wrapper {
  padding-bottom: 140px;
}

.accordionRepeater__wrapper:last-child {
  padding-bottom: 0;
}

.accordionRepeater__row--even {
  flex-direction: row-reverse;
}

.accordionRepeater .accordionCard {
  margin: 13px 0;
  cursor: pointer;
  padding-left: 26px;
}

.accordionRepeater .accordionCard:hover .accordionCard__body-label {
  color: var(--green);
}

.accordionRepeater .accordionCard--open {
  background-color: var(--white-2);
  padding: 36px 48px 45px 26px;
  border-radius: 10px;
}

.accordionRepeater .accordionCard__expand {
  position: absolute;
}

.accordionRepeater .accordionCard__expand:before,
.accordionRepeater .accordionCard__expand:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  transform: translate(0px, 10px);
  right: 0;
  margin: 0 0 -8px;
  background-color: var(--green);
  border-radius: 5px;
}

.accordionRepeater .accordionCard__expand:before {
  right: 8px;
  width: 3px;
  height: 16px;
  transition: all 0.5s ease;
  margin-top: -7.5px;
}

.accordionRepeater .accordionCard__expand:after {
  right: 1px;
  width: 16px;
  height: 3px;
  margin-top: -1.5px;
}

.accordionRepeater .accordionCard__expand.expanded:before,
.accordionRepeater .accordionCard__expand.expanded:after {
  background-color: var(--black-2);
}

.accordionRepeater .accordionCard__expand.expanded:before {
  height: 0;
  margin-top: 0;
}

.accordionRepeater .accordionCard__body {
  margin-left: 20px;
}

.accordionRepeater .accordionCard__body--visible {
  width: 100%;
}

.accordionRepeater .accordionCard__body--hidden {
  overflow: hidden;
  height: 0;
}

.accordionRepeater .accordionCard__body-label {
  transition: all 0.5s ease;
  margin-left: 20px;
}

.accordionRepeater .accordionCard__body-copy {
  padding: 24px 0 17px 0;
}

.accordionRepeater .accordionCard__body-link {
  transition: none;
}

.accordionRepeater__image {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />

<div class="accordionRepeater">
  <div class="container">
    <!-----------
     -- FIRST SET
     -------------->

    <div class="accordionRepeater__wrapper">
      <div class="row justify-content-between align-items-center accordionRepeater__row accordionRepeater__row--odd">
        <div class="col-12 col-lg-6">
          <div class="accordionRepeater__text">
            <div class="accordionRepeater__text-accordion">
              <!-- CARD 1 -->

              <div class="accordionCard position-relative d-flex flex-column" data-item="1">
                <div class="accordionCard__body">
                  <div class="accordionCard__expand"></div>
                  <span class="accordionCard__body-label d-block">Lorum</span>
                </div>
                <div class="accordionCard__body--hidden">
                  <div class="accordionCard__body-copy">
                    <p>Lorum ipsum</p>
                  </div>
                </div>
              </div>

              <!-- CARD 2 -->

              <div class="accordionCard position-relative d-flex flex-column" data-item="2">
                <div class="accordionCard__body">
                  <div class="accordionCard__expand"></div>
                  <span class="accordionCard__body-label d-block">Lorum 2</span>
                </div>
                <div class="accordionCard__body--hidden">
                  <div class="accordionCard__body-copy">
                    <p>Lorum ipsum 2</p>
                  </div>
                </div>
              </div>

              <!-- CARD END -->
            </div>
          </div>
        </div>

        <div class="col-12 col-lg-6">
          <div class="accordionRepeater__graphic">
            <img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="1" />
            <img class="accordionRepeater__image" src="https://picsum.photos/550" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="2" />
            <img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="3" />
          </div>
        </div>
      </div>
    </div>

    <!-----------
    -- FIRST SET END
    -------------->

    <!-----------
     -- SECOND SET
     -------------->

    <div class="accordionRepeater__wrapper">
      <div class="row justify-content-between align-items-center accordionRepeater__row accordionRepeater__row--even">
        <div class="col-12 col-lg-6">
          <div class="accordionRepeater__text">
            <div class="accordionRepeater__text-accordion">
              <!-- CARD 1 -->

              <div class="accordionCard position-relative d-flex flex-column" data-item="1">
                <div class="accordionCard__body">
                  <div class="accordionCard__expand"></div>
                  <span class="accordionCard__body-label d-block">Lorum</span>
                </div>
                <div class="accordionCard__body--hidden">
                  <div class="accordionCard__body-copy">
                    <p>Lorum ipsum</p>
                  </div>
                </div>
              </div>

              <!-- CARD END -->
            </div>
          </div>
        </div>

        <div class="col-12 col-lg-6">
          <div class="accordionRepeater__graphic">
            <img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="1" />
          </div>
        </div>
      </div>
    </div>

    <!-----------
    -- SECOND SET END
    -------------->
  </div>
</div>

回复 原文
極樂鬼 2025-01-28 18:42:27

更改这一行：

if ($(this).hasClass("accordionCard--open")) {

到：

if ($(this).hasClass("accordionCard--open") == true) {

否则，它实际上没有任何作用。希望这是您需要的！

Change this line:

if ($(this).hasClass("accordionCard--open")) {

To:

if ($(this).hasClass("accordionCard--open") == true) {

Otherwise, it doesn't really do anything. I Hope this is what you needed!

回复 原文
~没有更多了~

关于作者

秋凉

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

琉璃梦幻

文章 0 评论 0

qq_4zWU6L

文章 0 评论 0

话少情深

文章 0 评论 0

西西弗的石头怪

文章 0 评论 0

彻夜缠绵

文章 0 评论 0

千寻…

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文