Question

我想创建一个嵌套的bootstrap折叠。当单击其按钮时，以id =“ ss11”作为父级的折叠起作用，但其他嵌套的嵌套不起作用。我哪里出问题了？单击按钮时，如何使这些嵌套的折叠起作用？这是HTML

<div class="card-body">
                            <div>
                                <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss11" aria-expanded="false" aria-controls="ss11">
                                            ss1 : science
                                 </button>       
                            </div>

                            <div class="collapse" id="ss11">

                                    <div class="card card-body">
                                        <div>
                                        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12013/20141" aria-expanded="false" aria-controls="ss12013/20141">
                                                                2013/20141
                                         </button>

                                        </div>

                                         <div class = "collapse" id = "ss12013/20141">
                                                <p>hello lindsay lowhay</p>
                                        </div>


                                        <div>
                                        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12014/20151" aria-expanded="false" aria-controls="ss12014/20151">
                                                                2014/20151
                                                </button>   
                                        </div>

                                         <div class = "collapse" id = "ss12014/20151">
                                                <p>hello lindsay lowhay</p>
                                        </div>

                                    </div>
                            </div>

                            <div>
                                <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12" aria-expanded="false" aria-controls="ss12">
                                            ss1 : art
                                 </button>

                            </div>

                            <div class="collapse" id="ss12">
                                    <div class="card card-body">

                                        <div>
                                        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12013/20142" aria-expanded="false" aria-controls="ss12013/20142">
                                                                2013/20142
                                                </button>   
                                        </div>

                                         <div class = "collapse" id = "ss12013/20142">
                                                <p>hello lindsay lowhay</p>
                                        </div>

                                        <div>
                                        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12014/20152" aria-expanded="false" aria-controls="ss12014/20152">
                                                                2014/20152
                                                </button>   
                                        </div>

                                         <div class = "collapse" id = "ss12014/20152">
                                                <p>hello lindsay lowhay</p>
                                        </div>

                                    </div>
                            </div>

            </div>

Answer 1

名称/ ID中不能包含“ / ”；您可以将其替换为

连字符“ -”
下划线“ _ ”

获得您正在寻找的行为...

<script src="https://unpkg.com/@videojs/http-streaming@1.11.2/dist/videojs-http-streaming.js"></script>

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
  data-setup='{}'>
  </video>

  <script>
    videojs.Hls.xhr.beforeRequest = function(options){
      options.uri = options.uri+'/liveout/?md5=_PwgAm2z_kO8FgmWRWXvhQ&expires=1574698730';
      //.replace('cloudfront.net', 'foo.com');
      console.log(options);
      return options;
    };
    var player=videojs('my_video_1');
    player.ready(function() {
      this.src({
        src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',
        type: 'application/x-mpegURL'
      });

    });    
  </script>

如何嵌套bootstrap崩溃

1 个答案: