My Codepen

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')
  }
})

My Codepen

您好，我的jQuery有一个“逻辑”问题。目标是在面板打开时添加背景（单击1）。它的工作方式有一半，即背景添加正确，但只需点击2次。我想它来自我的jQuery的第一行，当时触发我的事件。但我不知道该怎么做。

一个想法？感谢。

Answer 1

ANSWER UPDATE

您可以将“折叠”类添加到锚点。

自：

<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>

OLD ANSWER

根据 charlietfl 评论，您可以使用collapse-events：

示例：

$('#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>

Bootstrap崩溃和jQuery事件

My Codepen

1 个答案: