javascript - 在浏览器调整大小之前，Thinglink 图像不可见

Question

我正在尝试重新调整一个预先存在的主题，其中包括一个显示图像的下拉菜单。我试图将 Thinglink 嵌入到下拉菜单的内容部分，但在我调整浏览器窗口大小之前它是不可见的。

这是菜单的样子:

然后单击时，我可以看到应该显示图像的空白区域:

然后当浏览器调整大小时，图像出现:

这是菜单内容的代码:

<div class="ajax_accordion_content" style="display: none;">
  <div class="report-detail">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="table_basic">
      <tbody>
      <!-- ThingLink image to be embedded -->
        <img style="max-width: 100%;" src="http://cdn.thinglink.me/api/image/832705713204625409/1024/10/scaletowidth#tl-832705713204625409;1043138249'" class="alwaysThinglink"/>
        <script async charset="utf-8" src="http://cdn.thinglink.me/jse/embed.js"></script>
      </tbody>
    </table>
  </div>
</div>

如果我将 ajax_accordion_content 显示设置为阻塞，则图像会正确显示。但是，我希望在单击菜单之前隐藏它。如何在不调整浏览器大小的情况下打开菜单时加载图像？

Answer 1

看起来您想要一个 jQuery 点击功能。我不知道你的菜单部分，所以我添加了一个按钮，例如..这是一个现场 fiddle 链接
https://jsfiddle.net/ve04q9sm/1/

$(function() {
  $("#display-img").click(function() {
   $(".ajax_accordion_content").toggle('slow')
   $(this).find('i').toggleClass('glyphicon-menu-right glyphicon-menu-down');
   })

})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button id="display-img" class="btn btn-primary"><span><i class="glyphicon glyphicon-menu-right"></i></span>Kid who did not get rounded</button>
 <div class="ajax_accordion_content" style="display: none;">
  <div class="report-detail">
	<table border="0" cellpadding="0" cellspacing="0" width="100%" class="table_basic">
	  <tbody>
<!-- ThingLink image to be embedded -->
<img style="max-width: 100%;" src="http://cdn.thinglink.me/api/image/832705713204625409/1024/10/scaletowidth#tl-832705713204625409;1043138249'" class="alwaysThinglink" />
<script async charset="utf-8" src="http://cdn.thinglink.me/jse/embed.js"></script>
	 </tbody>
   </table>
 </div>
</div>