jQuery中的javascript切換無法按預期工作

Question

我有一個僅使用JavaScript即可打開和關閉iframe的按鈕。

但是，當我單擊按鈕時，按鈕不僅隨iframe消失，而且隨iframe一起消失。

在Firebug控制台中簽入時，按鈕的CSS還將顯示參數更改為“無”。

$(document).ready(function(){

    var iDiv = document.createElement('div');
    iDiv.id = 'enigma';
    iDiv.setAttribute("style", "font-size:18px;position:fixed;bottom:20px;right:5px;display:inline");
    document.body.appendChild(iDiv);

    var div = document.createElement("div");
    div.innerHTML = '<iframe src="http://example.com/index.html" width="400" height="200" style="border:0"></iframe>';
    iDiv.appendChild(div);

    var div2 = document.createElement("div");
    div2.setAttribute("style","display:inline;");
    div2.innerHTML = '<button id="button2">Show/Hide</button>';
    document.body.appendChild(div2);

    setTimeout(function() {
        $("#button2").css({"position": "fixed", "display": "inline", "bottom": "0", "right": "0"}).click(function(){
            $("div").toggle('show');
        });
    }, 100);
});

Answer 1

單擊按鈕后，運行

$("div").toggle('show');

這會切換頁面中的所有div 。 這包括一個包含按鈕的按鈕。 您可以向要隱藏的div添加一個ID，以使其正常工作：

var div = document.createElement("div");
div.id = "to-toggle";
...
setTimeout(function() {
    $("#button2").css({"position": "fixed", "display": "inline", "bottom": "0", "right": "0"}).click(function(){
        $("#to-toggle").toggle('show');
    });
}, 100);

Answer 2

$("div").toggle('show'); 切換所有 <div>元素。

也許你想要

$("iframe").toggle('slow');

或者更具體一些，並按照Iluvatar的回答在您要控制的元素上添加一個id

Answer 3

您需要在這里更具體...

$("div").toggle();

您目前定位每個div標簽。