我想设置下拉菜单。 当我点击Check-box Physics然后打开子类别。 其他明智的不开放。这是一些代码.. 我想以表格的形式设置这个菜单。任何人都可以帮助我..告诉我如何设置jquery。
<table >
<tr>
<td valign="top">Disciplines :</td>
<td><table>
<tr>
<td width="30"><input type="checkbox" name="Physics" /></td>
<td width="200">Physics
<table style="display:none;">
<tr>
<td width="30"><input type="checkbox" name="Acoustics" /></td>
<td width="200">Acoustics</td>
</tr>
<tr>
<td width="30"><input type="checkbox" name="Cosmology" /></td>
<td width="200">Cosmology</td>
</tr>
<tr>
<td width="30"><input type="checkbox" name="Nuclear Physics" /></td>
<td width="200">Nuclear Physics</td>
</tr>
</table>
<td width="30"><input type="checkbox" name="Chemistry" /></td>
<td width="200">Chemistry
<table style="display:none;">
<tr>
<td width="30"><input type="checkbox" name="Chromatography" /></td>
<td width="200">Chromatography</td>
</tr>
<tr>
<td width="30"><input type="checkbox" name="Catalysis" /></td>
<td width="200">Catalysis</td>
</tr>
<tr>
<td width="30"><input type="checkbox" name="Geochemistry" /></td>
<td width="200">Geochemistry</td>
</tr>
</table>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
答案 0 :(得分：3)
我希望这对你有用
$('input[name="Physics"]').on('click', function() {
$('.physicsTable').slideToggle();
})
$('input[name="Chemistry"]').on('click', function() {
$('.cheTable').slideToggle();
})
<强> Working Demo
答案 1 :(得分：1)
试试这个：
$('input[name=Physics], input[name=Chemistry]').on('click', function(){
if($(this).is(':checked')){
$(this).parent().next().find('table').show();
}else{
$(this).parent().next().find('table').hide();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td valign="top">Disciplines :</td>
<td>
<table>
<tr>
<td width="30">
<input type="checkbox" name="Physics" />
</td>
<td width="200">Physics
<table style="display:none;">
<tr>
<td width="30">
<input type="checkbox" name="Acoustics" />
</td>
<td width="200">Acoustics</td>
</tr>
<tr>
<td width="30">
<input type="checkbox" name="Cosmology" />
</td>
<td width="200">Cosmology</td>
</tr>
<tr>
<td width="30">
<input type="checkbox" name="Nuclear Physics" />
</td>
<td width="200">Nuclear Physics</td>
</tr>
</table>
<td width="30">
<input type="checkbox" name="Chemistry" />
</td>
<td width="200">Chemistry
<table style="display:none;">
<tr>
<td width="30">
<input type="checkbox" name="Chromatography" />
</td>
<td width="200">Chromatography</td>
</tr>
<tr>
<td width="30">
<input type="checkbox" name="Catalysis" />
</td>
<td width="200">Catalysis</td>
</tr>
<tr>
<td width="30">
<input type="checkbox" name="Geochemistry" />
</td>
<td width="200">Geochemistry</td>
</tr>
</table>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
答案 2 :(得分：1)
我稍微修改了你的代码和PFB源代码并希望它有所帮助
HTML
function showhidetables(value) {
if (value == "1") {
document.getElementById('phisycs').style.display = "table";
document.getElementById('Chemistry').style.display = "none";
document.getElementById("PhysicsCheck").checked = true;
document.getElementById("ChemistryCheck").checked = false;
}
if (value == "2") {
document.getElementById('phisycs').style.display = "none";
document.getElementById('Chemistry').style.display = "table";
document.getElementById("PhysicsCheck").checked = false;
document.getElementById("ChemistryCheck").checked = true;
}
}<table>
<tr>
<td valign="top">Disciplines :</td>
<td>
<table>
<tr>
<td width="30">
<input type="checkbox" id="PhysicsCheck" name="Physics" onClick="showhidetables('1')" />
</td>
<td width="200">Physics
<table id="phisycs" style="display: none;">
<tr>
<td width="30">
<input type="checkbox" name="Acoustics" />
</td>
<td width="200">Acoustics</td>
</tr>
<tr>
<td width="30">
<input type="checkbox" name="Cosmology" />
</td>
<td width="200">Cosmology</td>
</tr>
<tr>
<td width="30">
<input type="checkbox" name="Nuclear Physics" />
</td>
<td width="200">Nuclear Physics</td>
</tr>
</table>
<td width="30">
<input type="checkbox" name="Chemistry" id="ChemistryCheck" onClick="showhidetables('2')" />
</td>
<td width="200">Chemistry
<table style="display: none;" id="Chemistry">
<tr>
<td width="30">
<input type="checkbox" name="Chromatography" />
</td>
<td width="200">Chromatography</td>
</tr>
<tr>
<td width="30">
<input type="checkbox" name="Catalysis" />
</td>
<td width="200">Catalysis</td>
</tr>
<tr>
<td width="30">
<input type="checkbox" name="Geochemistry" />
</td>
<td width="200">Geochemistry</td>
</tr>
</table>
</tr>
</table>
</td>
</tr>
</table>
答案 3 :(得分：0)
你也可以用css做到这一点。想象一下，你有这个复选框和菜单作为兄弟：
<input type="checkbox" class="switcher">
<ul class="menu">
<li>Home</li>
<li>Products</li>
<li>Info</li>
<li>Contact</li>
</ul>
然后你可以默认将max-height设置为0，并在复选框为：checked
时将其展开.menu{
overflow:hidden;
background: red;
width: 150px;
max-height: 0px;
transition: max-height 0.6s ease;
}
.switcher:checked + .menu{
max-height: 100px;
}