如何将扩展/折叠图标的切换添加到Bootstrap手风琴？

Question

我想扩展Bootstrap手风琴示例，使其包括向上/向下指向的V形符号，以指示列表项是否已扩展。 我注意到，折叠列表项会向button添加collapsed类，在这种情况下，我想显示一个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中描述的字体，图标就不会显示。 但是，我在“实际”应用程序中观察到的是chrevron都指向同一方向并串联移动：

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

更新

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

 $(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/

更新

我针对所需的行为做了一些更改。 现在，如果单击带有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>