我在表单中有多个字段，如果用户点击一个字段，我想显示一个表格，否则如果他们点击另一个字段，则表格应该被隐藏。
我试过这个javascript但是当点击其他字段时它不会隐藏表格：
<script>
function myFunction() {
if (document.getElementById("userform")) {
document.getElementById("userinfo").style.display="block";
} else {
document.getElementById("userinfo").style.display="none";
}
}
</script>
在每个字段中，我在每个输入类型中都包含onclick="myFunction()"。该表格设置为style="display:none"
这是HTML：
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="hest" class="col-sm-1 control-label"><b>Pi</b></label>
<div class="col-sm-10">
<input type="tel" class="form-control" id="userform"
placeholder="Enter your unique Pi identity" onclick="myFunction()">
</div>
</div>
<div class="form-group">
<label for="inputPassword1" class="col-sm-1 control-label">
<b>Password</b>
</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword1"
placeholder="Password" onclick="()">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-sample btn-lg">
<b>Submit</b>
</button>
</div>
</div>
</form>
<div id="userinfo" class="collapse in" style="display:none">
<table class="table table-bordered" id="phone-table">
<tbody>
<tr>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<br> <b>1</b>
</button>
</td>
<td class="col-md-1">
<button type="button"
class="btn btn-primary btn-xs1">
<b>ABC<br>2
</b>
</button>
</td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>DEF<br>3
</b>
</button>
</td>
</tr>
<tr>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>GHI<br>4
</b>
</button></td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>JKL<br>5
</b>
</button></td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>MNO<br>6
</b>
</button></td>
</tr>
<tr>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>PQRS<br>7
</b>
</button></td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>TUV<br>8
</b>
</button></td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>WXYZ<br>9
</b>
</button></td>
</tr>
<tr>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b><i class="fa fa-arrow-circle-left"></i><br>Del</b>
</button></td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b> <br>0
</b>
</button></td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b><i class="fa fa-eraser"></i><br>Clr</b>
</button></td>
</tr>
</tbody>
</table>
</div>
答案 0 :(得分：2)
因为Jquery是标签之一，我把我的美分投入jquery
.hide(); / .show();隐式将dislay设置为css中的block或none。
$(function(){
$('#close').on('click',function(){
$('#danceforme').hide();
});
$('#open').on('click',function(){
$('#danceforme').show();
});
});
HTML
<button id="close">Stop Dancing</button>
<button id="open">Dance for me</button>
<div id="danceforme">
I am dancing
</div>
答案 1 :(得分：2)
您也标记了jQuery，因此在这种情况下它将是
$("#id").show();
$("#id").hide();
答案 2 :(得分：2)
Doniyor的答案非常适合jQuery。我想帮助解释如何使您现有的代码工作，因为这将有助于您理解它为什么不起作用，而不仅仅是为您提供解决方案。
myFunction（）的问题是if语句 -
if (document.getElementById("userform"))
检查是否有ID＆＃34; userform＆＃34;存在于DOM中。如果是，则该语句返回true。因为有一个ID＆＃34; userform＆＃34;在您提供的HTML中，这将永远是真的。
相反，您要检查触发您的功能的元素是否具有ID＆＃34; userform＆＃34;，
所以相关的HTML看起来像这样：
<div class="form-group">
<label for="hest" class="col-sm-1 control-label"><b>Pi</b></label>
<div class="col-sm-10">
<input type="tel" class="form-control" id="userform"
placeholder="Enter your unique Pi identity" onclick="myFunction(this)" />
</div>
</div>
<div class="form-group">
<label for="inputPassword1" class="col-sm-1 control-label">
<b>Password</b>
</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword1"
placeholder="Password" onclick="myFunction(this)"/>
</div>
</div>
myFunction（）看起来像这样：
function myFunction(obj) {
if (obj.id == "userform") {
document.getElementById("userinfo").style.display="block";
} else {
document.getElementById("userinfo").style.display="none";
}
}
An explanation of registering onclick events。因为您通过html注册onclick而不是脚本，所以触发元素不会成为函数的所有者，这是this所指的内容。所以我们必须通过参数传递对象，并检查该对象的ID。
当然，这一切都非常迂回，因为您已经在使用jQuery和bootstrap，所以您可能不想手动显示和隐藏内容。
您尝试显示/隐藏的div是collapse，该引导程序已经具有此功能。
说明：首先，我删除了折叠元素上的style="display:none"和类in。崩溃时的类in告诉bootstrap默认要显示的元素，而display:none会覆盖bootstrap的样式。使用class="collapse"就足够了，默认为折叠或隐藏。
接下来，我删除了onclick分配，因为我们会让bootstrap处理它。
最后，我用脚本告诉bootstrap我们想要的行为替换了现有的脚本行为：
$("#userform").focusin(function(){alert("in"); $("#userinfo").collapse("show");});
$("#inputPassword1").focusin(function(){alert("out"); $("#userinfo").collapse("hide");});
我将警报留给调试，当您不确定发生了什么时，始终很有用！
那是做什么的？在Bootstrap's example usage之后，我们希望在点击＆＃34; userform＆＃34;元件。
首先，当id userform的元素获得焦点时，我们告诉jquery我们想要做什么。这是$("#userform").focusin() via jQuery API docs。
然后我们告诉jquery当发生这种情况时我们想要做什么 - 我们可以指定一个命名函数，比如myFunction()，但在这种情况下，它只是一行，所以我们创建了一个内联函数。那是function(){}。
在该函数内部，我们指定了我们需要的Bootstrap行为。从Bootstrap docs开始，我们知道我们可以使用函数collapse("show")手动展开折叠元素。告诉Bootstrap哪一个，我们只给jQuery元素id！这就是$("#userinfo").collapse("show");
将其置于我们的focusin()函数中指定的触发函数内，我们得到最终结果：`$（＆＃34;＃userform＆＃34;）。focusin（function （）{$（＆＃34; #userinfo＆＃34;）。collapse（＆＃34; show＆＃34;）;}）;
接下来，我们对要触发隐藏collapse元素的元素执行相同操作。因此，我们只需修改#inputPassword1的该行，并告诉它使用collapse("hide")代替"show"来隐藏折叠。逻辑，对吧？
当我编写这样的行为来查阅文档时，我发现它非常有用。通常有一些我想要做的事情的例子，只需要稍微调整即可在我的网站上工作。
jQuery's documentation is here.
Bootstrap's documentation is here.
当您在SO上寻求帮助时，如果您可以创建jsFiddle以将问题与您正在制作的网站的复杂性隔离开来，那就太棒了。然后，其他想要帮助的用户可以创建要显示的代码的修改副本。这非常有帮助！
干杯。