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

问题描述：

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

这里是菜单的样子： asdf

然后单击时，我可以看到一个空的空间，图像应该显示： asdf

然后，当浏览器的大小时，会出现图像： asdf

这是菜单的内容代码：

<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显示设置为阻止，则图像将正确显示。但是，我希望它被隐藏，直到我点击菜单。如何在菜单打开时加载图像，而不必调整浏览器大小？

尝试IMG宽度100％，因为你已经设置表格宽度100％.. –

创建演示如js小提琴 –

@MostafaBaezid我做了，但是这并没有解决它。 – kreesh

答

看起来像你想要一个jQuery点击功能。我硝基甲苯知道你的菜单部分，所以我添加一个按钮，例如。这里是一个活生生的小提琴链接
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"> 
 
\t <table border="0" cellpadding="0" cellspacing="0" width="100%" class="table_basic"> 
 
\t <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> 
 
\t </tbody> 
 
    </table> 
 
</div> 
 
</div>

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

相关推荐