个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
现在，下面的代码显示了一个表格，其中的行在单击时会展开/收缩。我希望每一行的内容在单击时向下和向上滑动。我该怎么做？
function MyCtrl($scope) {
$scope.environment_service_packages =
[
{name: 'Click to expand', info: {text: 'some extra info', show: false}},
{name: 'obj2', info: {text: 'some extra info for obj2', show: false}},
];
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app>
<table ng-controller="MyCtrl" class="table table-hover table-striped">
<tr class="info">
<td>...</td>
</tr>
<tbody ng-repeat="x in environment_service_packages">
<tr ng-click="x.info.show = !x.info.show">
<td> {{ x.name }}
</tr>
<tr ng-show="x.info.show">
<td>
{{ x.info.text }}
</td>
</tr>
</tbody>
</table>
</body>最佳答案
试试这个。我刚刚添加了一个淡入。尝试一些其他效果，看看是否有效。
礼貌这个很棒的库 (animate.css)[https://daneden.github.io/animate.css/]
function MyCtrl($scope) {
$scope.environment_service_packages = [{
name: 'Click to expand',
info: {
text: 'some extra info',
show: false
}
}, {
name: 'obj2',
info: {
text: 'some extra info for obj2',
show: false
}
}, ];
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<body ng-app>
<table ng-controller="MyCtrl" class="table table-hover table-striped">
<tr class="info">
<td>...</td>
</tr>
<tbody ng-repeat="x in environment_service_packages">
<tr ng-click="x.info.show = !x.info.show">
<td>{{ x.name }}
</tr>
<tr ng-show="x.info.show" class="animated fadeIn">
<td>
{{ x.info.text }}
</td>
</tr>
</tbody>
</table>
</body>关于javascript - 动画扩展/收缩表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38237198/
27
4
0
我对 ScalaCheck(以及整个 Scala)相当陌生，所以这可能是一个相当简单的解决方案 我正在使用 ScalaCheck 为 AST 生成测试并验证编写器/解析器是否工作。我有这些文件 AST
我首先创建一个特定大小的 JTextArea。用户可以在其中添加文本，但如果它变得太长(垂直或水平)，它将被截断。我希望 JTextArea 自动扩展或收缩(用于删除文本)。 我将来可能会允许用户更改
我正在学习如何在浏览器更改大小时调整 div 元素的大小。我希望我的 slider (参见 Fiddle)始终显示 10 张幻灯片，即使浏览器变小(参见下图)也是如此。 目标: 我能想到的实现这一点的
嗨，我在使用 css 面板时遇到了一些问题，我有点想寻求帮助，我的代码运行良好，但是如果用户让浏览器缩小尺寸，面板就会出现在文本下面，这就是我的意思意思是: 这是正常浏览器大小下的样子: 如果用户将浏
我正在研究和实现事件轮廓的贪婪算法，如 Donna Williams 的论文 - 事件轮廓和曲率估计的快速算法中所述。 与另一种实现(Kass 等人的实现)相比的优势之一应该是沿等高线曲线的点均匀分布
在 PHP 中，如何复制 tinyurls 的扩展/收缩功能，就像在 search.twitter.com 上一样？ 最佳答案 如果你想找出一个 tinyurl 的去向，使用 fsockopen 在端
有java.io.ZipInputStream膨胀和java.io.ZipOutputStream这会泄气。 但有时我不希望这样。有时，当使用接受 InputStream 的第三方 API 时，我想要
我试图做到这一点，以便在选择文件后，显示文件路径的文本字段会自动收缩/扩展以适合路径。 JFileChooser fileChooser = new JFileChooser(); if (fileC
我有两个 flexbox，它们在高度变化时收缩，嵌套内容重叠。 如何防止这种情况？ 最佳答案 just add flex-shrink:0 to your element and the flexbo
想要逐渐“打开”和“关闭”表格中的行，适本地向下推或拉起下面的行。 我能够通过使用 transition 进行计时和使用 transform 进行大小调整来使 div 扩展/收缩(无法使用 heigh
我有一个10列24行的表，可以存储一个值，也可以是=0。它们被称为msg1，msg2...直到msg10。我正在编写一个查询，用 0 而不是任何字段中的特定值来更新此表。 所以我写了(59是一个测试值
有谁知道缩小/压缩 db4o 数据库的方法吗？ 最佳答案 压缩/收缩是什么意思？缩小现有数据库？还是要压缩数据库？ 其中一个角色是 defragmentation .这将释放数据库中未使用的空间。删除
我正在使用 flexbox 来布局页面，因为 growing 行为很有用。但我想完全防止收缩行为。 无论如何要管理这个？ 示例代码: This one should gr
我是 jQuery/Javascript 的新手，甚至是通过缩小的 jQuery/Javascript 进行搜索的新手。 我正在尝试重新创建我在 Materialize 框架的表单组件中找到的一些功能
我有一个对象表及其类型，如下所示: objectType | object 107 Boeing 107 Airbus 323 Audi 323
我正在尝试使用以编程方式构建的 TableLayout 将 20x20 表格放入 View 中。 setStretchAllColumns/setShrinkAllColumns 方法非常适合压缩所有
我有一个 QDialog 和一个 QVBoxLayout 控制它的高度。 这个主要的 QVBoxLayout 由一个或多个 QVBoxLayout child 组成，后面是一些其他小部件。当我添加额外
如何缩小任意(未指定)宽度的居中图像周围的 anchor (绿色边框)？换句话说，我想要绿色边框居中的秒框，就像第一个一样。没有 float ，没有绝对定位。 移除行 (A) 中心，但 anchor
我正在制作一款安卓游戏。我在 Galaxy sII 上测试我的应用程序。我取得了很大进步。不幸的是，我忽略了对其他设备进行测试。我知道我会遇到不同类型设备的不同分辨率问题。但我认为我可以通过安排我的坐
如果 GUI 设计人员使用特定设备屏幕尺寸作为引用点提供 iOS 设计，那么如果应用程序在不同设备上运行，如何使字体扩展或收缩？ 即假设设计者提供了一个以 iPhone 8 屏幕尺寸为引用的单一设计，
我是一名优秀的程序员,十分优秀！