Question

这种方式的工作方式是，一旦我点击div，使用'signupbutton'类iframe就会淡入。这部分工作正常。我遇到麻烦的是试图找出一旦我用“signupbutton”类再次点击同一个div后我可以淡出iframe。有什么建议吗？

<div class="signupbutton_container">
    <div class="signupbutton" style="background-image:url('http://placehold.it/350x150')" onclick="showForm('dGFKTUJrUDdHQkEyeTVMaDhCODFnemc6MA')">&nbsp;</div>
</div>

function showForm(formkey) {
    $("iframe").remove();
    $(".section-lights").append("<iframe class='contactframe' src='https://docs.google.com/spreadsheet/embeddedform?formkey="+formkey+"' height='999' frameborder='no' width='100%' height='1847' style='height:2952px; display:none;'>");
    $("iframe").fadeIn();
}

Answer 1

尝试使用fadeToggle()：

function showForm(formkey) {
    $(".section-lights").append("<iframe class='contactframe' src='https://docs.google.com/spreadsheet/embeddedform?formkey="+formkey+"' height='999' frameborder='no' width='100%' height='1847' style='height:2952px; display:none;'>");
    $("iframe").fadeToggle();
}

Answer 2

function showForm(formkey) {
    if($("iframe").length == 0){
        //add iframe
        $(".section-lights").append("<iframe class='contactframe' src='https://docs.google.com/spreadsheet/embeddedform?formkey="+formkey+"' height='999' frameborder='no' width='100%' height='1847' style='height:2952px; display:none;'>");
    }
    $("iframe").fadeToggle();
}

单击fadeIn / fadeOut iframe

2 个答案: