在浏览器调整大小之前，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点击功能。我不知道你的菜单部分所以我添加一个按钮例如..这是一个现场小提琴链接
https://jsfiddle.net/ve04q9sm/1/

＆＃13;

＆＃13;

DataGridView

＆＃13;

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

})

＆＃13;

＆＃13;

＆＃13;