Bootstrap手風琴，使用jQuery在折疊時將“+”改為“ - ”

Question

因此，我正在嘗試在用戶單擊按鈕后顯示“減號（連字符）”符號。 到目前為止，我嘗試過的代碼不起作用。 你能指出錯誤在哪里嗎？

<a role="button" data-toggle="collapse" data-parent="#accordion" 
href="#collapse<?php echo $i; ?>" aria-expanded="false" aria-
controls="collapse<?php echo $i; ?>" class="collapsed text15">

   <i class="more-less glyphicon glyphicon-plus"></i>
    Slot Name

</a>

我試試這個代碼，但它沒有用。

 jQuery('#accordion').on('shown.bs.collapse', function () {
   jQuery(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus");
});

jQuery('#accordion').on('hidden.bs.collapse', function () {
   jQuery(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});

Answer 1

而不是這個你可以添加class="showhide"並使用以下腳本

$(document).on('click', '.showhide', function (event) {
    var icon = $(this).find('i:first');
    icon.toggleClass('glyphicon-plus').toggleClass('glyphicon-minus');
});

<a role="button" data-toggle="collapse" data-parent="#accordion" 
href="#collapse<?php echo $i; ?>" aria-expanded="false" aria-
controls="collapse<?php echo $i; ?>" class="collapsed text15 showhide">
   <i class="more-less glyphicon glyphicon-plus"></i>
    Slot Name
</a>    

Answer 2

你也可以用CSS做到這一點

.panel-heading .accordion-toggle:after {
font-family: "Glyphicons Halflings";
content: "\e113";
float: right;
}

.panel-heading .accordion-toggle.collapsed:after {
  content: "\e114";
}

 body { margin: 0; } a { cursor: pointer; } .panel-default>.panel-heading { background-color: rgba(19, 162, 176, 0.1); border-left: 17px solid #13a2b0; } .sample-accordion { list-style: none; margin-bottom: 0; padding: 0; } .panel-title { color: black; font-family: "Kepler Std"; font-size: 36px; font-weight: 700; text-transform: uppercase; } .panel-body { border-left: 4px solid #13a2b0; padding: 28px 28px 0 28px; } .panel-group .panel+.panel { margin-top: 28px; } .sample-accordion-item { background-color: rgba(0, 0, 0, 0.05); margin-bottom: 15px; } .sample-accordion-item:last-child { margin-bottom: 0 !important; } .accordion-image { height: 100px; } .accordion-item { display: inline-block; } .accordion-item-link { color: #000; font-family: "Kepler Std"; font-size: 32px; margin-left: 15px; } .accordion-item-link:hover { color: #13a2b0; } .accordion-item a { text-decoration: none; } .panel-title a { text-decoration: none; } .panel-heading .accordion-toggle:after { font-family: "Glyphicons Halflings"; content: "\\e113"; float: right; } .panel-heading .accordion-toggle.collapsed:after { content: "\\e114"; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1"> List </a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in"> <div class="panel-body"> <ul class="sample-accordion"> <li class="sample-accordion-item"> <div class="accordion-item"><a class="accordion-item-link">Item 1</a></div> </li> <li class="sample-accordion-item"> <div class="accordion-item"><a class="accordion-item-link">Item 2</a></div> </li> <li class="sample-accordion-item"> <div class="accordion-item"><a class="accordion-item-link">Item 3</a></div> </li> <li class="sample-accordion-item"> <div class="accordion-item"><a class="accordion-item-link">Item 4</a></div> </li> <li class="sample-accordion-item"> <div class="accordion-item"><a class="accordion-item-link">Item 5</a></div> </li> </ul> </div> </div> </div> </div> </div> 

Answer 3

$(".glyphicon").removeClass選擇所有圖標，這可能不是你想要的。 使用$(e.target).prev().find("i")來取代圖標。 檢查這個工作演示：

 $(function() { $(".collapse").on('show.bs.collapse', function(e) { if ($(this).is(e.target)) { snippet.log("show "+this.id) } $(e.target).prev().find("i").removeClass("glyphicon-plus").addClass("glyphicon-minus"); }) $(".collapse").on('hidden.bs.collapse', function(e) { if ($(this).is(e.target)) { snippet.log("hide "+this.id) } $(e.target).prev().find("i").removeClass("glyphicon-minus").addClass("glyphicon-plus"); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> <script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><i class="more-less glyphicon glyphicon-plus"></i> Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Collapsible Group Item #2 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><i class="more-less glyphicon glyphicon-plus"></i> Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> Collapsible Group Item #3 </div> </div> </div> </div>