Bootstrap崩潰和jQuery事件

Question

$('.panel-title').click(function (e) {
  var item = $(e.target)

  // collapsed is a bootstrap class which comes off when a panel is open
  if (item.hasClass('collapsed')) {
    item.parent().parent().parent().css('background-color', 'pink')
  } else {
    item.parent().parent().parent().css('background-color', '#fff')
  }
})

我的Codepen

您好，我的jQuery有一個“邏輯”問題。 目的是在面板打開（單擊1）時添加背景。 在正確添加背景的前提下，它只能進行一半的操作，但只能單擊兩次。 我猜它來自觸發事件的jQuery第一行。 但是我不知道該怎么辦。

一個主意 ？ 謝謝。

Answer 1

答案更新

您可以將類“ collapsed”添加到錨。

從：

<a aria-controls="collapse1" aria-expanded="true" class="accordion-toggle" data-parent="collapseMain" data-toggle="collapse" href="#collapse1">Click 1</a>

至：

<a aria-controls="collapse1" aria-expanded="true" class="accordion-toggle collapsed" data-parent="collapseMain" data-toggle="collapse" href="#collapse1">Click 1</a>

這樣，您無需對JS代碼進行任何更改。

這個例子：

 $('.panel-title').click(function (e) { var item = $(e.target) // collapsed is a bootstrap class which comes off when a panel is open if (item.hasClass('collapsed')) { item.parent().parent().parent().css('background-color', 'pink') } else { item.parent().parent().parent().css('background-color', '#fff') } }) 

 body { background-color: #282a36; } .container { margin: 0 auto; width: 800px; } button { margin: 3% auto; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <button class="btn btn-default" data-target="#modal" data-toggle="modal" href="#">Click here</button> </div> <!--Modal--> <div aria-hidden="true" aria-labelledby="myModalLabel" class="modal modal--help fade" id="modal" role="dialog" tabindex="-1"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span></button> <h1 class="modal-title" id="myModalLabel"> Hello! </h1> </div> <div class="modal-body"> <div class="panel-group" id="accordion"> <div class="panel-group_heading"> <h2 class="panel-group_heading_title"> <a aria-controls="collapseMain" aria-expanded="true" class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapseMain">Click here.</a> </h2> <span class="indicator icon-arrow-top pull-right"></span> </div> <div class="panel-collapse collapse" id="collapseMain"> <div class="panel"> <div class="panel-heading"> <h2 class="panel-title"> <a aria-controls="collapse1" aria-expanded="true" class="accordion-toggle collapsed" data-parent="collapseMain" data-toggle="collapse" href="#collapse1">Click 1</a> </h2> <span class="indicator icon-plus pull-right"></span> </div> <div class="panel-collapse collapse" id="collapse1"> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus maxime, asperiores nisi aspernatur dolores distinctio eaque voluptates, nam eligendi temporibus deleniti, quis sunt accusantium quod, voluptate dolorem voluptas commodi id. </div> </div> </div> </div> </div> </div> </div> </div> </div> 

老答案

根據charlietfl的注釋，您可以使用崩潰事件 ：

這個例子：

 $('#collapse1').on('show.bs.collapse hide.bs.collapse', function (e) { if (e.type == 'show') { $(this).closest('.panel').css('background-color', 'pink') } else { $(this).closest('.panel').css('background-color', '#fff') } }) 

 body { background-color: #282a36; } .container { margin: 0 auto; width: 800px; } button { margin: 3% auto; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <button class="btn btn-default" data-target="#modal" data-toggle="modal" href="#">Click here</button> </div> <!--Modal--> <div aria-hidden="true" aria-labelledby="myModalLabel" class="modal modal--help fade" id="modal" role="dialog" tabindex="-1"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span></button> <h1 class="modal-title" id="myModalLabel"> Hello! </h1> </div> <div class="modal-body"> <div class="panel-group" id="accordion"> <div class="panel-group_heading"> <h2 class="panel-group_heading_title"> <a aria-controls="collapseMain" aria-expanded="true" class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapseMain">Click here.</a> </h2> <span class="indicator icon-arrow-top pull-right"></span> </div> <div class="panel-collapse collapse" id="collapseMain"> <div class="panel"> <div class="panel-heading"> <h2 class="panel-title"> <a aria-controls="collapse1" aria-expanded="true" class="accordion-toggle" data-parent="collapseMain" data-toggle="collapse" href="#collapse1">Click 1</a> </h2> <span class="indicator icon-plus pull-right"></span> </div> <div class="panel-collapse collapse" id="collapse1"> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus maxime, asperiores nisi aspernatur dolores distinctio eaque voluptates, nam eligendi temporibus deleniti, quis sunt accusantium quod, voluptate dolorem voluptas commodi id. </div> </div> </div> </div> </div> </div> </div> </div> </div>