在模态内部的引导折叠回调函数不起作用

Bootstrap collapse callback function which is inside modal doesn't work

本文关键字：折叠 回调 函数 不起作用 模态 内部      更新时间：2023-09-26

这是我的代码

<div class="modal fade" id="Art" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" style="opacity: 0.85;">
        <div class="modal-content" style="background-color: #687077;" >
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel1">Art</h4>
            </div>
            <div class="modal-body">
                <div class="panel-group" id="accordion1" >
                    <div class="panel panel-default" style="border-width: 3px">
                        <div class="panel-heading" style="background-color: gray">
                            <h4 class="panel-title" style="color: black">
                                <a data-toggle="collapse" data-parent="#accordion1" href="#collapse1">Media</a>
                            </h4>
                        </div>
                        <div id="collapse1" class="panel-body collapse in">
                            <div class="panel-body" style="background-color: #687077">
                                <div class="table1container" id="yt-player">
                                    <iframe id="art_video" width="830" height="400" src="https://www.youtube.com/embed/BCkHnvDGWOY?autoplay=1" frameborder="0" allowfullscreen></iframe>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default" style="border-width: 3px">
                        <div class="panel-heading" style="background-color: gray">
                            <h4 class="panel-title" style="color: black">
                                <a data-toggle="collapse" data-parent="#accordion1" href="#collapse2">Content</a>
                            </h4>
                        </div>
                        <div id="collapse2" class="panel-collapse collapse">
                            <div class="panel-body" style="background-color: #687077">
                                <div class="table1container">
                                    <embed src="move.pdf" width="800px" height="800px" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

我这样写js 

$(document).ready(function() {
    $('#collapse1').on('hidden.bs.modal', function (e) {
        alert("it will not be printed");
    });
});

我想使用回调函数来收听collapse1是否显示或隐藏来控制youtube视频播放或停止。当collapse1显示时，播放视频。当它隐藏时，然后停止视频。我只是写了隐函数。但问题是，回调函数不工作!应该会出现警告窗口。如何处理这个问题?

你应该在modal-dialog中使用"id=collapse1"，而不是在panel-body中，像这样:

<div id="collapse1" class="modal-dialog modal-lg" style="opacity: 0.85;">

试试这个，hide.bs.collapse对我起作用

$(document).ready(function() {
     $("#collapse1").on("hide.bs.collapse", function(){
        alert("it will not be printed");
      });
});

我使用了这个版本的bootstrap

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
相关文章：