在 Bootstrap 折叠模块中显示藤蔓

Question

我正在尝试在 Twitter Bootstrap 的折叠模块中显示 iFrame 嵌入的藤蔓。

       <div class="panel-group visible-xs" id="accordion" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                  <strong>VINE #1</strong><br />
                  Place de la république
                </a>
              </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
              <div class="panel-body">
                <iframe class="vine-embed" src="https://vine.co/v/OmVAQpu9MVM/embed/simple" width="100%" height="480" frameborder="0"></iframe><script async src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script>
                <h3>1/20 - Place de la république</h3>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
              <h4 class="panel-title">
                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                  <strong>VINE #2</strong><br />
                  Quai de Seine
                </a>
              </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
              <div class="panel-body">
                <iframe class="vine-embed" src="https://vine.co/v/OmVAQpu9MVM/embed/simple" width="100%" height="480" frameborder="0"></iframe><script async src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script>
                <h3>2/20 - Quai de Seine</h3>
              </div>
            </div>
          </div>
        </div>

问题是，它只显示非折叠面板之一。可能是因为服务器没有加载隐藏的藤蔓......我看到一个与我的谷歌地图 iframe 非常相似的已解决问题，但无法使其适用于我的情况。 :(

$('[data-toggle="collapse"]').click('show.bs.collapse', function() {
  var mapFrame = $($(this).attr('href') + ' .googlemap iframe');
  if (!$(mapFrame).hasClass('map-refreshed')) {
    mapFrame.attr('src', mapFrame.attr('src')+'');
    mapFrame.addClass('map-refreshed');
  }
});

我最简单的方法是在打开折叠面板时加载我的葡萄藤？但我不知道该怎么做......

任何帮助将不胜感激。

Answer 1

show.bs.collapse 事件用于手风琴，因此您需要将其附加到手风琴。

$('#accordion').on('show.bs.collapse', function(e) { 
  var current = $(e.target).attr('id');      // current area clicked
  var vineFrame = $('#'+current+' iframe');  // find the iframe under the current clicked area

  if (!$(vineFrame).hasClass('map-refreshed')) {
    vineFrame.attr('src', vineFrame.attr('src')+'');
    vineFrame.addClass('map-refreshed');
  }
})

See Demo