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顯示設置爲阻止，則圖像將正確顯示。但是，我希望它被隱藏，直到我點擊菜單。如何在菜單打開時加載圖像，而不必調整瀏覽器大小？

來源

2016-09-15 kreesh

嘗試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>

來源

2016-09-15 16:44:46

Thinglink圖像在瀏覽器調整大小之前不可見

回答

相關問題