Bootstrap Accordion 打开时旋转图标答案

【问题标题】：Bootstrap Accordion rotate icon when openBootstrap Accordion 打开时旋转图标
【发布时间】：2020-08-31 15:59:49
【问题描述】：

我有一个 bootstrap 4 手风琴，我需要的是在手风琴“打开”时旋转并有条件地指向上方并在关闭时返回的图标。我可以用 css 做到这一点，但我需要它有条件地发生，因为有“活动”状态，而不是应该触发手风琴打开的事件，如果这有意义的话。

HTML：

<div class="accordion" id="accordion-nav">

    <div class="accordion-item">
        <div class="item-header" id="heading">
            <button class="btn btn-link btn-nav-accordion" type="button" data-toggle="collapse"
                data-target="#collapseDosing" aria-expanded="false" aria-controls="collapseDosing">
                <span>panel</span>
                <i class="fas fa-chevron-down "></i>
            </button>
        </div>

        <div id="collapseDosing" class="collapse collapse-nav-accordion"
            aria-labelledby="heading-dosing" data-parent="#accordion-nav">
            <div class="accordion-body">
                <div class="l-accordion-body">
                   <h1>Body</h1>>
                </div>
            </div>
        </div>
    </div>

    <div class="accordion-item accordion-item--savings">
        <div class="item-header" id="heading-savings">
            <button class="btn btn-link btn-nav-accordion" type="button" data-toggle="collapse"
                data-target="#collapseSavings" aria-expanded="false" aria-controls="collapseSavings">
                <span>panel</span>
                <i class="fas fa-chevron-down"></i>
            </button>
        </div>
        <div id="collapseSavings" class="collapse collapse-nav-accordion"
            aria-labelledby="heading-savings" data-parent="#accordion-nav">
            <div class="accordion-body">
                <div class="l-accordion-body">
                 <h1>Body</h1>
                </div>
            </div>
        </div>
    </div>
</div>

css：（确实在点击事件上工作）但有条件地需要另一种方式（js）我认为

.btn-nav-accordion[aria-expanded="true"] {
  .fa-chevron-down {
    transform: rotate(180deg);
  }
}

js：当前有效，但当我单击手风琴关闭时不会删除该类

 $(".collapse-nav-accordion").each(function () {
      var currentAccordion = this;
      if ($(currentAccordion).hasClass("show")) {
        $(currentAccordion).parent().find("i").addClass("rotate");
      } else {
        $(currentAccordion).parent().find("i").removeClass("rotate");
      }
    });

【问题讨论】：

标签： javascript html jquery css twitter-bootstrap

【解决方案1】：

您的问题是您正在使用需要编译成 css 的 scss。也不需要你的js。

.btn-nav-accordion[aria-expanded="true"] .fa-chevron-down {
  transform: rotate(180deg);
}

.fa-chevron-up {
    transition: all 0.3s ease;
 }
.btn-nav-accordion.collapsed .fa-chevron-up {
  transform: rotate(180deg);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="accordion" id="accordion-nav">

  <div class="accordion-item">
    <div class="item-header" id="heading">
      <button class="btn btn-link btn-nav-accordion collapsed" type="button" data-toggle="collapse" data-target="#collapseDosing" aria-expanded="false" aria-controls="collapseDosing">
                <span>panel</span>
                <i class="fas fa-chevron-up"></i>
            </button>
    </div>

    <div id="collapseDosing" class="collapse collapse-nav-accordion" aria-labelledby="heading-dosing" data-parent="#accordion-nav">
      <div class="accordion-body">
        <div class="l-accordion-body">
          <h1>Body</h1>
        </div>
      </div>
    </div>
  </div>

  <div class="accordion-item accordion-item--savings">
    <div class="item-header" id="heading-savings">
      <button class="btn btn-link btn-nav-accordion" type="button" data-toggle="collapse" data-target="#collapseSavings" aria-expanded="true" aria-controls="collapseSavings">
                <span>panel</span>
                <i class="fas fa-chevron-up"></i>
            </button>
    </div>
    <div id="collapseSavings" class="collapse collapse-nav-accordion show" aria-labelledby="heading-savings" data-parent="#accordion-nav">
      <div class="accordion-body">
        <div class="l-accordion-body">
          <h1>Body</h1>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

这是不正确的，是的，它确实有效，但我如何嵌套它（scss）也有效。我的问题是希望图标根据 .collapse 显示旋转。我在某些页面上动态地将“显示”添加到折叠中，因此当用户看到手风琴时，图标指向上方并且手风琴打开，现在如果他们此时关闭手风琴，我需要返回到原来的向下状态。现在发生的事情是图标一直向上。感谢您的输入:)
嘿，如果我理解正确，您的问题是您希望在页面加载时打开一些手风琴？如果是这样，我已经更新了我的评论，显示其中一个面板在加载时打开。

【解决方案2】：

在您的代码中：

if ($(currentAccordion).hasClass("show")) {
    $(currentAccordion).parent().find("i").addClass("rotate");
  } else {
    $(currentAccordion).parent().find("i").removeClass("rotate");
  }

您正在使用“旋转”类，但尚未指定“旋转”的作用 - 它是另一个 css 定义（如 .rotate {transform: rotate(180deg);}) 还是 js 行为，（如 if (el.hasClass('rotate')) { el.style.transform = rotate(180deg); }？

另外，我喜欢切换类，在 fa-chevron-down 和 fa-chevron-up 之间切换：

if (el.hasClass('rotate') { 
    el.classList.replace('fa-chevron-down', 'fa-chevron-up');
} else {
    el.classList.replace('fa-chevron-up', 'fa-chevron-down');
}

【讨论】：