Bootstrap崩溃和jQuery事件

debugcn 发表于 Dev

菲尔

$('.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第一行。但是我不知道该怎么办。

一个主意？谢谢。

盖塔诺

答案更新

您可以将类“ 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。