Question

这是我的代码

<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显示时，然后播放视频。当它隐藏时，然后停止视频。我刚刚写了隐藏的功能。但问题是，回调函数不起作用！应出现警报窗口。如何处理这个问题？

Answer 1

你应该使用＆＃34; id = collapse1＆＃34;在模态对话框中，而不是在面板体中，如下所示：

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

Answer 2

试试这个，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>

内部模态的Bootstrap折叠回调函数不起作用

2 个答案: