Question

我目前正在尝试隐藏<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>

jQuery的;

  $("#hiddenDiv").hide();
    $("#show").click(function () {
        $("#hiddenDiv").animate({ "opacity": "show", "top": "250px" }, "slow");
    });

单击show按钮后，我无法显示输入按钮。知道为什么会这样吗？

Answer 1

由于您在加载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()事件的详细信息，请参阅文档：

https://learn.jquery.com/using-jquery-core/document-ready/

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

1 个答案: