我正在尝试创建一个包含可以使用jQuery折叠和扩展的标题行的表.到目前为止,这是我的全部代码:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$("tr#cat1.header").click(function () {
$("tr#cat1.child").each(function() {
$(this).slideToggle("fast");
});
});
});
</script>
</head>
<body>
<table>
<tr id="cat1" class="header">
<td>Cat1</td>
<td>Row</td>
</tr>
<tr id="cat1" class="child">
<td>data1</td>
<td>data2</td>
</tr>
<tr id="cat1" class="child">
<td>data3</td>
<td>data4</td>
</tr>
<tr id="cat2" class="header">
<td>Cat1</td>
<td>Row</td>
</tr>
<tr id="cat2" class="child">
<td>data1</td>
<td>data2</td>
</tr>
</table>
</body>
</html>
如果我是正确的,在英语jQuery的部分内容,如:"当被点击了'CAT1’和一类'头’的ID的行,发现有'CAT1’的id和一个类中的所有行"孩子",每个人都可以滑动."
然而,当我运行它并点击标题行时,没有任何反应.任何见解？
编辑:在HTML表中添加了第二个类别.对不起,我应该更具体一点.我希望能够单击特定类别的标题行,并且只有那些子行折叠,而不是页面上的所有子行.以这种方式,表表现得像"手风琴",并且行按类别分组.
这将导致单击仅影响包含您单击的标题的表中的行,这意味着您可以将其更改为使用css类而不是复制id.
$("tr#cat1.header").click(function () {
$("tr#cat1.child", $(this).parent()).slideToggle("fast");
});
基本上this是单击的标题,我们将其包装在jQuery对象中并调用parent()(返回表),然后将其指定为新查询的上下文.
您的页面现在看起来像这样:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$("tr.header").click(function () {
$("tr.child", $(this).parent()).slideToggle("fast");
});
});
</script>
</head>
<body>
<table>
<tr class="header">
<td>Cat1</td>
<td>Row</td>
</tr>
<tr class="child">
<td>data1</td>
<td>data2</td>
</tr>
<tr class="child">
<td>data3</td>
<td>data4</td>
</tr>
</table>
<table>
<tr class="header">
<td>Cat1</td>
<td>Row</td>
</tr>
<tr class="child">
<td>data1</td>
<td>data2</td>
</tr>
<tr class="child">
<td>data3</td>
<td>data4</td>
</tr>
</table>
</body>
</html>
首先,您不应该有重复的行ID.对于页面上的每个元素,ID应该是唯一的.
此外,您不必使用each,因为jQuery会自动将slideToggle函数应用于选择器匹配的每个元素.我建议删除ID并使用类名:
$("tr.header").click(function () {
$("tr.child").slideToggle("fast");
});
如果您想确保只有某些表可以执行此切换功能,请在表上放置一个类并更新您的选择器:
<table class="collapsible">
<tr>
<td>Cat1</td>
<td>Row</td>
</tr>
<tr>
<td>Collapsible</td>
<td>Row</td>
---
$(".collapsible tr:first").click(function () {
$(this).nextAll().slideToggle("fast");
});
罗里的回答是正确的,我只是在扩展它.如果使用多个表,则可以从<tr>行中的s中删除CSS类,并将表简化为:
<table class="collapsible">
<tr>
<td>Cat1</td>
<td>Cat1</td>
</tr>
<tr>
<td>Collapsible</td>
<td>Row</td>
</tr>
</table>
<table class="collapsible">
<tr>
<td>Cat2</td>
<td>Cat2</td>
</tr>
<tr>
<td>Collapsible</td>
<td>Row</td>
</tr>
</table>
和jQuery到:
$(".collapsible tr:first").click(function () {
$(this).nextAll().slideToggle("fast");
});