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中并且我只是滑动切换，则框架无法正确渲染 - 这就是为什么我需要在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高度，但仍然看起来很愚蠢。

jQuery slideToggle无效

4 个答案: