javascript - 如何将展开/折叠图标的切换添加到 Bootstrap Accordion ？

Question

我想延长 Bootstrap accordion example包括指示列表项是否展开的上/下 V 形符号。我注意到折叠列表项会将 collapsed 类添加到 button，在这种情况下，我想显示一个 chrevon-down 图标；否则，对于展开的按钮，我想显示 chevron-up 图标。

我已经尝试在这个片段中实现它:

$(document).ready(function(){
    $("#accordion button").click(function(){
        $("#accordion button .mdi").each(function(){
          $(this).toggleClass('mdi-chevron-up', function(){
            return $(this).parent().hasClass('collapsed');
          });
          $(this).toggleClass('mdi-chevron-down', function(){
            return (!$(this).parent().hasClass('collapsed'));
          });
        });
    });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> 
 
 <div id="accordion">

    <div class="card border-bottom-0">
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button class="btn btn-light w-100 text-left" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            <i class="mdi mdi-chevron-up float-right"></i>
            Pipeline Integrity Assessment and Design
          </button>
        </h5>
      </div>
      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
        <div class="card-body">
          Our services include the design and assessment of subsea pipelines for lateral and/or upheaval buckling, arctic pipelines subject to ice gouging, stamukha loadings and/or thaw settlements, and pipelines crossing active faults, as well as more routine design and assessment.
        </div>
      </div>
    </div>

    <div class="card border-bottom-0">
      <div class="card-header" id="headingTwo">
        <h5 class="mb-0">
          <button class="btn btn-light w-100 text-left collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            <i class="mdi mdi-chevron-up float-right"></i>
            Structural Reliability Assessment (SRA)
          </button>
        </h5>
      </div>
      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
        <div class="card-body">
          <p>Ralf Peek has over 30 years of experience in the area of structural reliability assessment and the estimation and assessment of uncertainties affecting structural performance in order to ensure that safety margins are adequate to cover such uncertainties. His specific experience includes:
        	<ul>
        		<li>Reliability-based design of buried arctic subsea pipeline against loading by ice keels gouging the sea floor</li>
        		<li>SRA for pipelines subject to lateral buckling under thermal expansion</li>
        		<li>Operating pipelines subject to extreme conditions (for example, turbidity current loading)</li>
        		<li>Probabilistic response-based seismic loading assessment criteria</li>
        		<li>Nuclear containment structural reliability assessment</li>
        	</ul>
        </div>
      </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

如果不按照 https://materialdesignicons.com/bootstrap 中所述下载字体，图标似乎不会显示。 .然而，我在“实际”应用程序中观察到的是，chrevrons 都指向同一方向并串联移动:

有人能指出这个实现有什么问题吗？

更新

仔细阅读文档 (http://api.jquery.com/toggleclass/)，我注意到 .toggleClass() 的第二种形式需要一个 bool 值作为第二个输入参数，而不是一个返回 bool 值的函数。但是，使用此代码:

$(document).ready(function(){
  $("#accordion button").click(function(){
    $("#accordion button .mdi").each(function(){
      $(this).toggleClass('mdi-chevron-up', $(this).parent().hasClass('collapsed'));
      $(this).toggleClass('mdi-chevron-down', (!$(this).parent().hasClass('collapsed')));
    });
  });
});

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> 
     
     <div id="accordion">

        <div class="card border-bottom-0">
          <div class="card-header" id="headingOne">
            <h5 class="mb-0">
              <button class="btn btn-light w-100 text-left" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                <i class="mdi mdi-chevron-up float-right"></i>
                Pipeline Integrity Assessment and Design
              </button>
            </h5>
          </div>
          <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body">
              Our services include the design and assessment of subsea pipelines for lateral and/or upheaval buckling, arctic pipelines subject to ice gouging, stamukha loadings and/or thaw settlements, and pipelines crossing active faults, as well as more routine design and assessment.
            </div>
          </div>
        </div>

        <div class="card border-bottom-0">
          <div class="card-header" id="headingTwo">
            <h5 class="mb-0">
              <button class="btn btn-light w-100 text-left collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                <i class="mdi mdi-chevron-down float-right"></i>
                Structural Reliability Assessment (SRA)
              </button>
            </h5>
          </div>
          <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
            <div class="card-body">
              <p>Ralf Peek has over 30 years of experience in the area of structural reliability assessment and the estimation and assessment of uncertainties affecting structural performance in order to ensure that safety margins are adequate to cover such uncertainties. His specific experience includes:
            	<ul>
            		<li>Reliability-based design of buried arctic subsea pipeline against loading by ice keels gouging the sea floor</li>
            		<li>SRA for pipelines subject to lateral buckling under thermal expansion</li>
            		<li>Operating pipelines subject to extreme conditions (for example, turbidity current loading)</li>
            		<li>Probabilistic response-based seismic loading assessment criteria</li>
            		<li>Nuclear containment structural reliability assessment</li>
            	</ul>
            </div>
          </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

最初我已将第二个图标更改为 chevron-down，但我仍然观察到一些不良行为。最初显示如我所料:

但是，当我单击上面的列表项将其折叠时，下面的列表项也会反转其图标方向:

如何调试？

Answer 1

我会改变您使用 toggleClass 的方式。如果以空格分隔，则可以为匹配集中的每个元素切换一个以上的类名。查看文档:https://api.jquery.com/toggleclass/

更新

为了实现所需的行为，我稍微更改了您的 JavaScript。现在，如果您单击带有 mdi-chevron-up 图标的打开面板的标题，该图标应更改为 mdi-chevron-down。如果您单击带有 mdi-chevron-down 图标的已关闭面板的标题，它将更改为 mdi-chevron-up，并且任何其他打开的面板都将关闭，并且更改为 mdi-chevron-down。

希望这更符合您的要求。

function toggleChevron(e) {
  $(e.target)
    .prev('.card-header')
    .find("i.mdi")
    .toggleClass('mdi-chevron-down mdi-chevron-up');
}

$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);

<link href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/2.4.85/css/materialdesignicons.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div id="accordion">

  <div class="card border-bottom-0">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-light w-100 text-left" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <i class="mdi mdi-chevron-up float-right"></i>
                        Pipeline Integrity Assessment and Design
                      </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Our services include the design and assessment of subsea pipelines for lateral and/or upheaval buckling, arctic pipelines subject to ice gouging, stamukha loadings and/or thaw settlements, and pipelines crossing active faults, as well as more routine
        design and assessment.
      </div>
    </div>
  </div>

  <div class="card border-bottom-0">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-light w-100 text-left collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <i class="mdi mdi-chevron-down float-right"></i>
                        Structural Reliability Assessment (SRA)
                      </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        <p>Ralf Peek has over 30 years of experience in the area of structural reliability assessment and the estimation and assessment of uncertainties affecting structural performance in order to ensure that safety margins are adequate to cover such uncertainties.
          His specific experience includes:
          <ul>
            <li>Reliability-based design of buried arctic subsea pipeline against loading by ice keels gouging the sea floor</li>
            <li>SRA for pipelines subject to lateral buckling under thermal expansion</li>
            <li>Operating pipelines subject to extreme conditions (for example, turbidity current loading)</li>
            <li>Probabilistic response-based seismic loading assessment criteria</li>
            <li>Nuclear containment structural reliability assessment</li>
          </ul>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>