Div没有't打开html按钮

Div didn't toggle on html button

本文关键字：打开 html 按钮 没有 Div      更新时间：2023-09-26

JSFiddle

我希望在加载页面时隐藏div，然后当您单击按钮时，它将显示在页面上。但由于某些原因，它的表现真的很奇怪。我该怎么办？。

HTMl:

<p>Don't have an Employee Number?</p> <button id="namebutton">Click Here</button>
<div id="names">
<br>
<p>First name:</p>  <input type="text" name="firstname">
<br><br>
<p>Last name:</p>  <input type="text" name="lastname">
</div>

这是我的javascript：

 $(document).ready(function(){
  $("#namebutton").click(function(){
    $("#names").slideToggle("slow");
  });
});

CSS：

#names{
display: none;
}

您的JSfiddle没有包含jQuery，并且您的代码在"慢速"后面有一个逗号

HTML:

<p>Don't have an Employee Number?</p> <button id="namebutton">Click Here</button>
<div id="names" class="hidden-div">
    <br />
    <p>First name:</p>  <input type="text" name="firstname" />
    <br /><br />
    <p>Last name:</p>  <input type="text" name="lastname" />
</div>

jQuery:

$(document).ready(function(){
    $("#namebutton").click(function(){
        $("#names").toggleClass("hidden-div", false);
    });
});

CSS:

.hidden-div {
    visibility: hidden;
}

请参阅我的JSFiddle示例https://jsfiddle.net/SolveItSimply/j5y8fbsn/8/

如果你想使用JavaScript而不是jquery，你可以尝试以下功能：

window.onload = function() {
  document.getElementById("names").style.visibility = 'hidden';
  document.getElementById("namebutton").onclick = 'showNames()';
};
function showNames(){
  document.getElementById("names").style.visibility = 'visible';
}

slideToggle在这种情况下不起作用。：(

相关文章：