我正在开发一个用于CI测试的Bootstrap网站。我创建了一个带有下拉菜单的div #chooseTest，用户可以使用该菜单选择要执行的测试类型。
编辑： 该文件是.hbs文件（把手）。经过一番挖掘，我意识到带有jQuery的.js文件，甚至还没有运行......
当用户做出选择时，#chooseTest不应该是可见的（它仍然是：带有文本字段下的下拉菜单的Div）。并且适当的div应该在其位置可见：#mavenForm例如（带有复选框的div：查找错误和检查样式）。
现在什么都没有用。启动网站时，＃mavenForm可见，下拉菜单仅用于显示。代码有什么问题？
$(function () {
$("#mavenForm").hide();
$("#dropDownJava").click(function () {
$("#chooseTest").hide();
$("#mavenForm").show();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="gitForm">
<div class="Aligner">
<div class="container h-100 d-flex justify-content-center">
<div class="col-md-6">
<div class=card>
<div class="card-block">
<form class="form-create" action="/" method="post">
<div class="form-group">
<label id="nameLabel" for="projectNameInput">Name your
project</label>
<input type="text" class="form-control" name="jobname" id="projectNameInput"
placeholder="Enter a A project name you can live with">
</div>
<div class="form-group">
<label id="gitLabel" for="repoInput">Enter your Git
repository</label>
<input type="text" class="form-control" name="gitrep" id=repoInput
placeholder="A valid Gitrepo...">
</div>
<!-- The div #chooseTest which is to be replaced -->
<div id="chooseTest">
<div class="btn-group">
<button type="button" class="btn btn-outline-success dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose Test
</button>
<div class="dropdown-menu">
<a class="btn btn-outline-success dropdown-item" id="dropDownJava"
href="#mavenForm">Java</a>
</div>
</div>
</div>
<!-- The div #mavenForm that shouldn't be visible when the website launches -->
<div id="mavenForm">
<div class="form-group">
<div class="form-check">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" value="FindBugs">
<span class="custom-control-indicator"></span>
<span class="custom-control-description ml-4">FindBugs</span>
</label>
</div>
<div class="form-check">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" value="CheckStyle">
<span class="custom-control-indicator"></span>
<span class="custom-control-description ml-4">CheckStyle</span>
</label>
</div>
</div>
</div>
<div>
答案 0 :(得分：1)
您的代码似乎与jQuery 2.1.1以及您的jQuery函数在页面就绪函数中正常工作。请参阅下面的代码段以查看：
$(function(){
$("#mavenForm").hide();
$("#dropDownJava").click(function(){
$("#chooseTest").hide();
$("#mavenForm").show();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gitForm">
<div class="Aligner">
<div class="container h-100 d-flex justify-content-center">
<div class="col-md-6">
<div class=card>
<div class="card-block">
<form class="form-create" action="/" method="post">
<div class="form-group">
<label id="nameLabel" for="projectNameInput">Name your
project</label>
<input type="text" class="form-control" name="jobname" id="projectNameInput"
placeholder="Enter a A project name you can live with">
</div>
<div class="form-group">
<label id="gitLabel" for="repoInput">Enter your Git
repository</label>
<input type="text" class="form-control" name="gitrep" id=repoInput
placeholder="A valid Gitrepo...">
</div>
<!-- The div #chooseTest which is to be replaced -->
<div id="chooseTest">
<div class="btn-group">
<button type="button" class="btn btn-outline-success dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose Test
</button>
<div class="dropdown-menu">
<a class="btn btn-outline-success dropdown-item" id="dropDownJava"
href="#mavenForm">Java</a>
</div>
</div>
</div>
<!-- The div #mavenForm that shouldn't be visible when the website launches -->
<div id="mavenForm">
<div class="form-group">
<div class="form-check">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" value="FindBugs">
<span class="custom-control-indicator"></span>
<span class="custom-control-description ml-4">FindBugs</span>
</label>
</div>
<div class="form-check">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" value="CheckStyle">
<span class="custom-control-indicator"></span>
<span class="custom-control-description ml-4">CheckStyle</span>
</label>
</div>
</div>
</div>
<div>
答案 1 :(得分：0)
基于JQuery文档： “在文档”准备就绪“之前，页面无法安全操作.jQuery会为您检测到这种状态。$（document）.ready（）中包含的代码只会在页面文档对象模型（DOM）运行时运行准备好执行JavaScript代码。$（window）.on（“load”，function（）{...}）中包含的代码将在整个页面（图像或iframe）（而不仅仅是DOM）准备好后运行。 “
关于jsfiddle的另一个测试：https://jsfiddle.net/1v14syto/
所以你需要做的是用$（document）包围你的jquery代码.ready（function（）{/ *你的代码* /}）
$( document ).ready(function() {
$('#mavenForm').hide();
$('#dropDownJava').click(function(){
$('#chooseTest').hide();
$('#mavenForm').show();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gitForm">
<div class="Aligner">
<div class="container h-100 d-flex justify-content-center">
<div class="col-md-6">
<div class=card>
<div class="card-block">
<form class="form-create" action="/" method="post">
<div class="form-group">
<label id="nameLabel" for="projectNameInput">Name your
project</label>
<input type="text" class="form-control" name="jobname" id="projectNameInput"
placeholder="Enter a A project name you can live with">
</div>
<div class="form-group">
<label id="gitLabel" for="repoInput">Enter your Git
repository</label>
<input type="text" class="form-control" name="gitrep" id=repoInput
placeholder="A valid Gitrepo...">
</div>
<!-- The div #chooseTest which is to be replaced -->
<div id="chooseTest">
<div class="btn-group">
<button type="button" class="btn btn-outline-success dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose Test
</button>
<div class="dropdown-menu">
<a class="btn btn-outline-success dropdown-item" id="dropDownJava"
href="#mavenForm">Java</a>
</div>
</div>
</div>
<!-- The div #mavenForm that shouldn't be visible when the website launches -->
<div id="mavenForm">
<div class="form-group">
<div class="form-check">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" value="FindBugs">
<span class="custom-control-indicator"></span>
<span class="custom-control-description ml-4">FindBugs</span>
</label>
</div>
<div class="form-check">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" value="CheckStyle">
<span class="custom-control-indicator"></span>
<span class="custom-control-description ml-4">CheckStyle</span>
</label>
</div>
</div>
</div>
<div>