在我的网页中,有一个字段以前是正确的,并且具有某些元素。因此,如果您检查以前的手术,那么只有之前的手术元素显示其他情况。 以下是我的代码的一部分,但它无法正常运行。可以任何一个请告诉我
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(function(){
$('.toggler').click(function(){
if (this.checked) {
$('div#name').slideDown();
} else {
$('div#name').slideUp();
}
});
})
</script>
</head>
<body>
<table>
<tr>
<td height="30">
<b>Previous Surgery</b>
</td>
<td>
<input type="checkbox" name="myCB" value="A" class="toggler" checked="checked" />
</td>
</tr>
<div id="name">
<tr><td>Type of Surgery</td><td><input type="text"></td></tr>
<tr><td>Main Reason for surgery</td><td><input type="text"></td></tr>
<tr><td>Year</td><td><input type="text"></td></tr>
<tr><td>Reffered By</td><td><input type="text"></td></tr>
</div>
</table>
</body>
</html>
答案 0 :(得分:2)
原因是您的HTML无效。
Div不能成为table
的直接孩子。
修复您的HTML: -
<table>
<tr>
<td height="30"> <b>Previous Surgery</b>
</td>
<td>
<input type="checkbox" name="myCB" value="A" class="toggler" checked="checked" />
</td>
</tr>
</table>
<div id="name">
<table>
<tr>
<td>Type of Surgery</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Main Reason for surgery</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Year</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Reffered By</td>
<td>
<input type="text">
</td>
</tr>
</table>
</div>
$(function () {
$('.toggler').click(function () {
$('#name').slideToggle();
});
})
如果您的元素具有id,则单独使用它,因为它应该是唯一的并且在性能上的成本效益较低。
来自Doc
对于id选择器,jQuery使用JavaScript函数document.getElementById(),这非常有效。当另一个选择器附加到id选择器时,例如h2#pageTitle,jQuery在将元素标识为匹配之前执行额外的检查。
因此#name
优于div#name
。
感谢@Ian
答案 1 :(得分:0)
只需尝试这样
$(function(){
$('.toggler').click(function(){
$('div#name').toggle();
});
})
试试这个FIDDLE
并尝试将你的div放在桌子之外,正如我在小提琴中提到的那样
答案 2 :(得分:0)
<div id="name">
之间不能有tr
。在div
之前关闭您的桌子,然后重新打开它:
<table>
<tr>
<td height="30">
<b>Previous Surgery</b>
</td>
<td>
<input type="checkbox" name="myCB" value="A" class="toggler" checked="checked" />
</td>
</tr>
</table>
<div id="name">
<table>
<tr><td>Type of Surgery</td><td><input type="text"></td></tr>
<tr><td>Main Reason for surgery</td><td><input type="text"></td></tr>
<tr><td>Year</td><td><input type="text"></td></tr>
<tr><td>Reffered By</td><td><input type="text"></td></tr>
</table>
</div>
答案 3 :(得分:0)
你的div元素放置是错误的。将div放在适当的位置然后SlideUp和SlideDown方法应该可以工作。