个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
26
4
我正在尝试创建一个表格，其中包含可以使用 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 部分是这样的:“当单击 ID 为‘cat1’且类为‘header’的行时，查找所有具有 id 为‘cat1’的行，并且一类“ child ”，对于每个 child ，slideToggle。”
然而，当我运行它并单击标题行时，没有任何反应。有什么见解吗？
编辑:在 HTML 表格中添加了第二个类别。抱歉，我应该更具体一些。我希望能够单击特定类别的标题行，并且仅折叠那些子行，而不是页面上的所有子行。以这种方式，表格的行为就像一个“ Accordion ”，并且行按类别分组在一起。
最佳答案
这将导致点击仅影响包含您点击的标题的表格中的行，这意味着您可以将其更改为使用 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>
关于jquery - jQuery 中的可折叠表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1985647/
26
4
0
我正在尝试创建一个无序列表，其中每个 包含另一个无序列表。我想要触发子菜单向下滑动的列表项有类 mobile-collapse子菜单有类 mobile-drop-menu 。这是我的 jquery 代
我使用 PMD检查我的代码。在大多数情况下，它给了我非常有用的提示，但我无法弄清楚在以下情况下可以改进什么。 原始代码如下所示: if ((getSomething() != null && getS
需要一些 jquery/js/jsp 功能的帮助.. 我有一个可折叠的表格脚本: (function($){ $.fn.extend({ setupCollapstable: funct
我使用 CSS 和 Javascript 创建了一个 Accordion ，但我不知道如何在选择不同的 Accordion 后折叠打开的 Accordion 。我试过在 Javascript 中使用可
我使用 CSS 和 JS 编写了一个可折叠按钮，我想将一个按钮嵌套在另一个按钮中。 是否可以动态调整第一个/外部按钮的高度，以便在打开第二个/内部按钮时，第一个按钮的高度增加第二个按钮的高度？ 这是我
我正在使用 jQuery 创建一个导航系统。我想要实现的是在页面加载时显示父元素并隐藏子元素。我做得非常简单。 然而，当我在其他父元素之间切换时，我希望能够隐藏之前的子元素，以便我只能打开一个 一次。
我正在尝试匹配这个设计 点击卡片应该展开 我不能用卡片包裹扩展 block ，因为扩展 block 基本上只有一行，我试着按照这个例子 flutter_catalog 我在谷歌上搜索了很多，但找不到我
我正在尝试切换 div 以使其可见/隐藏。我正在制作一个排行榜，我想打开它，但只能在单击时打开。 test fu
我正在使用 Materialize CSS 并使用可折叠的 Accordion 式元素 ( http://materializecss.com/collapsible.html )。 出于某种原因，当
我有一个递归 TreeView ，它从数据库中提取所有信息，并且想了解如何使其可折叠。我尝试使用 Jquery 和 Javascript，但都没有任何效果。不确定是我的错误还是其他原因。 这是我的基本
我收到异常“可折叠 if 语句”。 通过以下代码中的 Sonar 。 if(getSomething().equals(getSomething()){ if(getsomehing.contai
我正在制作 Accordion 以在 Angular 应用程序中使用 javascript 制作可折叠的 div.. 为此，如果单击Parent One 或任何其他父名称上的按钮未打开它.. HTML
我正在将 Ant Design 与 React 一起使用。 Ant Design 有一个菜单组件:https://ant.design/components/menu/ 是否可以使菜单不可折叠/展开？
我想展示这个可折叠 Accordion 的第一个元素。我在互联网上做了一些研究，但徒劳无功 Aller au dossier personnel
考虑以下 foldMap 的签名 foldMap :: (Foldable t, Monoid m) => (a -> m) -> t a -> m 这与“绑定(bind)”非常相似，只是交换了参数:
使用“fieldsets”，您可以通过指定 CSS 类“collapse”使其可折叠。如何对“内联”做同样的事情？谢谢! 最佳答案 在 Django 1.10+ 中: class MyModelInl
有人已经用 YUI dataTable 制作了如下示例的脚本吗？ 示例: http://extjs.com/deploy/dev/examples/tree/column-tree.html http
好吧，有些事情很奇怪，我无法弄清楚。假设我有一些类别，每个类别都有一些项目，全部放入字典中。 import wx nyoom = {} nyoom['spiders'] = ['Yellow Sac'
我正在尝试实现一种可折叠的 StackLayout。每次用户单击按钮时，它都会展开或折叠堆栈布局以显示/隐藏更多详细信息。 我能够通过下面的代码实现更多/更少的效果，但它看起来不对而且效果也不是很好，
我的布局包含顶部的水平 recyclerView 和 viewPager。 ViewPager 在其每个选项卡中都有一个 recyclerView。 我想在用户滚动布局时折叠顶部水平回收器 View
我是一名优秀的程序员,十分优秀！