jQuery slideToggle無法正常工作

Question

我的JavaScript：

$("#preview-click").click( function() {
    $("#preview").slideToggle("fast", function() {
        $("#preview-pdf").html('<iframe style="width: 100%; height: 500px;" src="http://docs.google.com/gview?url=http://www.example.com/pdf/3.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>');
    });
}); 

我的HTML：

<a id="preview-click" style="cursor: pointer;">preview</a>
<div id="preview" class="generic-block-70" style="display: none">
    <div id="preview-pdf" class="generic-content-70">
    </div>
</div>

我正在嘗試使div向下滑動，然后更改其內容。 如果iframe已經在div中，而我只是slideToggle，則框架無法正確呈現-這就是為什么我只需要在使div可見后才生成內容。

上面的解決方案根本不起作用。 單擊鏈接沒有任何反應。

我還要注意，我有多個$(document).ready()

Answer 1

這在我的js小提琴上效果很好，這是您在使用准備好的文檔http://jsfiddle.net/CyCC3/

$(document).ready(function() {

$("#preview-click").click( function() {
    $("#preview").slideToggle("fast", function() {
        $("#preview-pdf").html('<iframe style="width: 100%; height: 500px;" src="http://docs.google.com/gview?url=http://www.example.com/pdf/3.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>');
    });
}); 

});

Answer 2

$("#preview-click").click( function() {
    $("#preview").slideToggle("fast", function() {
        $("#preview-pdf").html('<iframe style="width: 100%; height: 500px;" src="http://docs.google.com/gview?url=http://www.example.com/pdf/3.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>');
    });
    return false; 
}); 

Answer 3

$("#preview-click").click( function() {
    $("#preview").slideToggle("fast", function() {
        $("#preview-pdf").html('<iframe style="width: 100%; height: 500px;" src="http://docs.google.com/gview?url=http://www.example.com/pdf/3.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>');
    });
    return FALSE;
}); 

Answer 4

就我而言，Slidetoggle部分在我的iframe中工作，但它留有空白，我仍然找到解決該問題的答案。

我的JS

    $(document.myform).ready(function() {
       $('div.demo:eq(0)> div#headerview').click(function() {
       $(this).next().slideToggle('20');
    });
  }); 

我的HTML

<div class="demo">
<div id="headerview" style="cursor:pointer;">SlideStarts</div>
     <table>
        <tr>
            <td></td>
        </tr>
     </table>
</div>

上下滑動時，我嘗試更改iframe的高度，但看起來仍然很愚蠢。