Javascript 显示包含输入按钮的隐藏div

我目前正在尝试显示一个隐藏的

，它在单击按钮后包含两个输入按钮

这是我的HTML

// Button to show <div>
<input type="button" value="Show" id="show" class="show"/>

<div id="hiddenDiv" style="font-size:20px;">                                    
    <input type="button" class="btn-default" id="button1" />                                                                 
    <input type="button" class="btn-default" id="button2" />                                                                                                                
</div>  

---

单击

show

-按钮后，无法显示输入按钮。知道为什么会发生这种情况吗？

因为您在加载html之前运行JavaScript，所以需要将代码放入

ready（）

事件中，一旦html加载到页面上就会触发该事件

<script>
    $( document ).ready(function() {
        $("#hiddenDiv").hide();
        $("#show").click(function () {
            $("#hiddenDiv").animate({ "opacity": "show", "top": "250px" }, "slow");
        });
    });
</script>
<input type="button" value="Show" id="show" class="show"/>

<div id="hiddenDiv" style="font-size:20px;">                                    
    <input type="button" class="btn-default" id="button1" />                                                                 
    <input type="button" class="btn-default" id="button2" />                                                                                                                
</div>  

$（文档）.ready（函数（）{
$（“#hiddenDiv”）.hide（）；
$（“#显示”）。单击（函数（）{
$（“#hiddenDiv”）.animate（{“不透明”：“显示”，“顶部”：“250px”}，“慢速”）；
});
});

有关

ready（）

事件的更多信息，请参阅文档：

---

，它似乎工作得很好。您是否记得包含jQuery并使用

document.ready

您是否在控制台中看到任何错误？您是在html之后还是之前运行代码？如果在html之前运行它，则html元素尚未创建，javascript将无法找到它们。@adeneo是的，我添加了

文档.ready

和jQuery。甚至在我按下按钮之前，按钮就完全可见了。按下按钮后，它们消失。@TechCount因为您以前运行过它，所以需要将其放置在onReady事件中：否则需要将其移动到html文档的末尾。谢谢。我仍然看不到

中隐藏的输入按钮，但原因可能是它位于引导面板中，我只需要调整它们的大小即可显示出来。您的输入按钮没有

value=”“

属性，这可能是原因。

<script>
    $( document ).ready(function() {
        $("#hiddenDiv").hide();
        $("#show").click(function () {
            $("#hiddenDiv").animate({ "opacity": "show", "top": "250px" }, "slow");
        });
    });
</script>
<input type="button" value="Show" id="show" class="show"/>

<div id="hiddenDiv" style="font-size:20px;">                                    
    <input type="button" class="btn-default" id="button1" />                                                                 
    <input type="button" class="btn-default" id="button2" />                                                                                                                
</div>