javascript - 仅当单击按钮时，如何显示带有表单的 div？

Question

我在 div 中有一个表格，其中包含一个供用户填写的表格。div 上方是一个显示“客户信息”的按钮。我只想在客户想要填写信息时才显示表格。这个想法是，如果他们想填写，可以单击按钮，表格将出现在下方。这些部分有很多，所以我只希望客户必须看到他们想看到的内容。下面是一个例子...

<input type="button" value="Customer Info" onClick="">
<div>
<form>
<table>
<tr>
<td>Name:<input type="text" value="" id="name" name="name"></td>
</tr>
</table>
</div>

我的问题是如何编写一个简单的 javascript 函数，该函数将在单击显示和隐藏 Div 的按钮时起作用？该表单仍将隐藏在那里，并且值将是空白的。

Answer 1

您可以使用该onClick事件来做到这一点：

工作示例

HTML：

<button id="some_id">Hide div</button>

<form id="some_form">

<form>

javascript:

<script type="text/javascript">
    var theButton = document.getElementById('some_id');
    
    theButton.onclick = function() { 
        document.getElementById('some_form').style.visibility='hidden';   
    }
    
</script>
   

Answer 2

内联 javascript 被认为是不好的做法

IE。onClick=""

改用这样的东西

<input id="info" type="button" value="Customer Info">
<div id="myDiv">
    <form>Name:
        <input type="text" value="" id="name" name="name">
        </input>
    </form>
</div>

var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");

function show() {
    myDiv.style.visibility = "visible";
}

function hide() {
    myDiv.style.visibility = "hidden";
}

function toggle() {
    if (myDiv.style.visibility === "hidden") {
        show();
    } else {
        hide();
    }
}

hide();

button.addEventListener("click", toggle, false);

在jsfiddle上

这是 David Thomas 在评论中建议的代码。它执行完全相同的任务，但对toggle函数使用简写 if-else 并且不为您提供单独的show和hide函数。

<input id="info" type="button" value="Customer Info">
<div id="myDiv">
    <form>Name:
        <input type="text" value="" id="name" name="name">
        </input>
    </form>
</div>

var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");

function toggle() {
    myDiv.style.visibility = myDiv.style.visibility === "hidden" ? "visible" :  "hidden";
}

toggle();

button.addEventListener("click", toggle, false);

在jsfiddle上

Answer 3

 <script type="text/javascript">
$("#music").click(function () {
$("#musicinfo").show("slow");
});
</script>

您可以更改效果，例如切换，fadeToggle 代替显示...