Question

我希望在加载页面时隐藏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;
}

Answer 1

你的JSfiddle没有包含jQuery，你的代码在＆＃34;慢＆＃34;

之后有一个逗号

Answer 2

<强> 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/

Answer 3

如果您想使用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在这种情况下不起作用。：）

Div没有在html按钮上切换

3 个答案: