2016-12-11 12 views
0

JavaScriptを使用してiframeをオン/オフするボタンがあります。jqueryのjavascriptトグルが期待通りに機能しない

ボタンをクリックすると、iframeが消える代わりにiframeとともにボタンも消えます。

ボタンのCSSは、Firebugコンソールをチェックインしている間も、表示パラメータを「なし」に変更します。

$(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); 
}); 
+0

ボタンをクリックすると、ボタンを含むものを含むすべての「div」をトグルすることができます。 – Iluvatar

+0

あなたはすべてのdivをトグルしています。あなたのボタンは 'div'ですか?マークアップを含めてください。 – Carcigenicate

+0

ああ...私の悪い...私は私が間違っていることを得た。 iframeだけを切り替えるにはどうしたらよいでしょうか? iframe IDを追加する必要がありますか? – hnvasa

答えて

1

$("div").toggle('show');トグルすべて<div>要素。

おそらく、あなたは

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

以上具体的に、あなたがIluvatar's answer

+0

'' show''は 'toggle() 'の引数ではありません – charlietfl

+0

本当に' slow'を意味しますか? – Iluvatar

+0

@charlietfl良いキャッチ。 – Moob

0

ごとにあなたがここに具体的にする必要がありますように制御しようとしている要素にidを追加したい...

$("div").toggle(); 

現在、すべてのdivタグをターゲティングしています。

2

ボタンをクリックすると、ページ内div秒のすべてを切り替えます

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

を実行します。これには、ボタンを含むものも含まれます。

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); 
関連する問題