javascript - Bootstrap 3 - Event shown.bs.collapse or shown.bs.modal not fired if the accordion is inside a modal

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 id="modal-title"> </h4>
    </div>
    <div class="modal-body">
      <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">Course Introduction

                            </a>
                            </h4>
                        </div>

                        <div id="collapse1" class="panel-collapse collapse in">
                            <div class="panel-body">
                            <p>abc</p>
                            </div>
                        </div>
                    </div>

                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse2">Description

                            </a>
                            </h4>
                        </div>

                        <div id="collapse2" class="panel-collapse collapse">
                            <div class="panel-body">
                            <p>Lorem </p>
                            </div>
                        </div>
                    </div>

                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse3">Goals

                            </a>
                            </h4>
                        </div>

                        <div id="collapse3" class="panel-collapse collapse">
                            <div class="panel-body">
                            <p>Lorem ipsum dolor sit </p>
                            </div>
                        </div>
                    </div>

                </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>
  </div></div> <!-- end of Modal -->

And here is the javascript. I just want to add class to collapsible tab when a tab is clicked in the accordion and wanted to close all accordions when the modal is closed but Event shown.bs.collapse or shown.bs.modal is not firing.

$('#myModal').on('hidden.bs.modal', function () {
$('.collapse').collapse('hide');
});
$('#myModal').on('shown.bs.modal', function () {
$('#collapse1').collapse('show');
});

$('#accordion').find('.panel-default:has(".in")').addClass('panel-danger');

$('#accordion').on('show.bs.collapse', function (e) {
$(e.target).closest('.panel-default').addClass(' panel-danger');
}).on('hide.bs.collapse', function (e) {
$(e.target).closest('.panel-default').removeClass(' panel-danger');
})

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 id="modal-title"> </h4>
    </div>
    <div class="modal-body">
      <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">Course Introduction

                            </a>
                            </h4>
                        </div>

                        <div id="collapse1" class="panel-collapse collapse in">
                            <div class="panel-body">
                            <p>abc</p>
                            </div>
                        </div>
                    </div>

                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse2">Description

                            </a>
                            </h4>
                        </div>

                        <div id="collapse2" class="panel-collapse collapse">
                            <div class="panel-body">
                            <p>Lorem </p>
                            </div>
                        </div>
                    </div>

                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse3">Goals

                            </a>
                            </h4>
                        </div>

                        <div id="collapse3" class="panel-collapse collapse">
                            <div class="panel-body">
                            <p>Lorem ipsum dolor sit </p>
                            </div>
                        </div>
                    </div>

                </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>
  </div></div> <!-- end of Modal -->

$('#myModal').on('hidden.bs.modal', function () {
$('.collapse').collapse('hide');
});
$('#myModal').on('shown.bs.modal', function () {
$('#collapse1').collapse('show');
});

$('#accordion').find('.panel-default:has(".in")').addClass('panel-danger');

$('#accordion').on('show.bs.collapse', function (e) {
$(e.target).closest('.panel-default').addClass(' panel-danger');
}).on('hide.bs.collapse', function (e) {
$(e.target).closest('.panel-default').removeClass(' panel-danger');
})

Share Improve this question asked Jan 18, 2017 at 16:47 Loveneet Saini 1163 silver badges17 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

You have forgot to use the event in your code. it should be $('#myModal').on('click','hidden.bs.modal', function () { instead of $('#myModal').on('hidden.bs.modal', function () {. Here is the working example...

$('#myModal').on('click','hidden.bs.modal', function () {
$('.collapse').collapse('hide');
});
$('#myModal').on('click','shown.bs.modal', function () {
$('#collapse1').collapse('show');
});

$('#accordion').find('.panel-default:has(".in")').addClass('panel-danger');

$('#accordion').on('click','show.bs.collapse', function (e) {
$(e.target).closest('.panel-default').addClass(' panel-danger');
}).on('hide.bs.collapse', function (e) {
$(e.target).closest('.panel-default').removeClass(' panel-danger');
})

<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn./bootstrap/3.3.6/js/bootstrap.min.js"></script><link href="http://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
          <button class = "btn btn-file btn-md q_info" data-toggle="modal" data-target="#myModal">click</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 id="modal-title"> </h4>
    </div>
    <div class="modal-body">
      <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">Course Introduction

                            </a>
                            </h4>
                        </div>

                        <div id="collapse1" class="panel-collapse collapse in">
                            <div class="panel-body">
                            <p>abc</p>
                            </div>
                        </div>
                    </div>

                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse2">Description

                            </a>
                            </h4>
                        </div>

                        <div id="collapse2" class="panel-collapse collapse">
                            <div class="panel-body">
                            <p>Lorem </p>
                            </div>
                        </div>
                    </div>

                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse3">Goals

                            </a>
                            </h4>
                        </div>

                        <div id="collapse3" class="panel-collapse collapse">
                            <div class="panel-body">
                            <p>Lorem ipsum dolor sit </p>
                            </div>
                        </div>
                    </div>

                </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
  </div>
  </div></div> <!-- end of Modal --> 
  </body>

Finally I fixed the problem. I put my jquery code into

$(document).ready(function(){ ................ CODE............});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Bootstrap 3 - Event shown.bs.collapse or shown.bs.modal not fired if the accordion is inside a modal - Stack Overfl

2 Answers 2

与本文相关的文章

评论列表(0)