如何將擴展/折疊圖標的切換添加到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>