我想在我的頁面中實現一個框，該框會按需顯示：用戶按下按鈕，顯示div。按需添加div的最佳方法

作爲視覺例子就是我想實現的，看看上的jsfiddle的鍵盤快捷鍵框（下左上角）：http://jsfiddle.net/

現在我不知道以何種方式我應該這樣做：

創建DIV馬上並將其設置爲顯示：無，而沒有必要
寫一個腳本添加是在div通過JS
寫它加載它從外部.html文件的腳本

你會推薦什麼方式？

更新

如果我得到這不加載頁面時顯示，但應在需要添加15個不同的盒子？當然，它會工作，但我們可以稱之爲「良好實踐」，只是隱藏我們不想看到的每一個元素？

來源

2012-12-21 Sprottenwels

我會選擇（一）有一個去現有的div可以讓您更好地控制何時顯示/隱藏和處理事件。 [切換使用javascript div的可見度]的 – ryadavilli

可能重複（http://stackoverflow.com/questions/7743373/toggling-visibility-of-divs-using-javascript） – Cerbrus

提供正確的鏈接 – paragy

更新：您最近修改的問題要問的是不是立即需要約15個左右的元素。在這種情況下，有很多非直接元素，我可能會考慮在需要時動態創建它們，但始終先檢查它們的存在，以免最終重複創建它們。

我只想加載頁面加載時的元素：

<div id="box"></div>

風格它，讓它可以在默認情況下不可見：

#box { 
    position: fixed; 
    top: 10%; left: 10%; 
    width: 80%; height: 80%; 
    background: red; 
    display: none; 
}

再用線向上在某些事件上顯示它的邏輯，或許是按空格鍵：

var $box = $("#box"); 

$(document).on({ 
    keydown: function (event) { 
     if (event.which === 32 && $box.is(":not(:visible)")) 
      $box.stop().fadeIn(); 
    }, 
    keyup: function (event) { 
     if (event.which === 32) 
      $box.stop().fadeOut(); 
    } 
});

瞧：http://jsfiddle.net/GfMsd/

或者你可以作爲它的基礎了另一個元素的點擊，喜歡的jsfiddle做：

$(".toggle").on("click", function (event) { 
    $("#box").stop().fadeToggle(); 
});

演示：http://jsfiddle.net/GfMsd/1/

來源

2012-12-21 13:39:09 Sampson

只要空格鍵被按下，這隻會顯示'div'。那是故意的嗎？ – Cerbrus

猜測它更像是一個概念驗證 – Sprottenwels

@Cerbrus是的。問題是關於展示一個盒子。我採取了一種方式。我已更新我的答案以顯示簡單的點擊切換選項。 – Sampson

只是在默認情況下並使用jQuery在div添加到HTML，並設置CSS屬性display到none褪色它在點擊如下：

$('#some_button').click(function(){ 
    $('.hidden_box').fadeIn(); 
});

工作實例

試試這個工作jsfiddle

來源

2012-12-21 13:37:19 Amyth

沒有jQuery的答案，只是爲了確保本機JS不被低估;-)

創建包含div你想要的任何內容，並將其定位，無論你希望它是最後，並且隱藏：

<div id="hiddenDiv" style="display:none">Some content here</div>

然後，在一個按鈕添加一個事件偵聽器來切換它的可視性。

document.getElementById('showDivButton').addEventListener('click', toggleDiv); 
var div = document.getElementById('hiddenDiv'); 

function toggleDiv(){ 
    if(div.style.display == 'block') { 
     div.style.display = 'none'; 
    }else{ 
     div.style.display = 'block'; 
    } 
}

來源

2012-12-21 13:38:18 Cerbrus

按需添加div的最佳方法

回答

工作實例

相關問題