工作示例

Question

我想在我的页面中实现一个框，按需显示：用户按下按钮，显示div。

作为我想要实现的视觉示例，请查看jsfiddle（左下角）上的键盘快捷方式框：http://jsfiddle.net/

现在我不确定我应该采用哪种方式：

立即创建div并将其设置为显示：none，不需要
编写一个脚本，通过JS
编写一个从外部.html文件加载它的脚本

你会推荐什么方式？

更新

如果我有15个不同的盒子，当页面加载时没有显示，但是应该按需添加，该怎么办？当然，它会起作用，但我们可以称之为“良好做法”，只是隐藏我们不想看到的每一个元素吗？

Answer 1

只需将div添加到HTML并默认将css属性display设置为none，然后使用jquery将其淡入淡出，如下所示：

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

工作示例

尝试这项工作jsfiddle

Answer 2

更新：您最近修改了问题，询问了大约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/

Answer 3

没有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';
    }
}

按需添加div的最佳方式

3 个答案:

工作示例