CSS/Javascript为具有不同高度的项设置高度展开和折叠动画
CSS/Javascript为具有不同高度的项设置高度展开和折叠动画。
展开和折叠动画是一种常见的交互效果，可以通过CSS和JavaScript来实现。下面是一个完善且全面的答案：
展开和折叠动画是一种在网页中实现元素高度变化的效果，通过点击或其他交互方式，可以使元素从折叠状态平滑地展开或折叠起来。这种效果可以提升用户体验，使页面更加动态和生动。
实现展开和折叠动画的方法有多种，其中一种常见的方式是使用CSS的transition属性和JavaScript来控制元素的高度变化。具体步骤如下：
- 首先，通过CSS设置元素的初始高度和过渡效果。可以使用max-height属性来设置元素的最大高度，同时使用transition属性来定义过渡效果的持续时间和动画效果。
- 接下来，使用JavaScript来监听用户的交互事件，比如点击事件。当用户点击触发展开或折叠动作时，通过修改元素的高度属性来实现动画效果。
- 在JavaScript中，可以使用DOM操作来获取元素的高度，并通过修改元素的样式属性来改变元素的高度。可以使用classList属性来添加或移除CSS类，从而触发CSS中定义的过渡效果。
- 在展开和折叠的过程中，可以根据需要添加一些额外的动画效果，比如淡入淡出、滑动等效果，以增强用户体验。
展开和折叠动画可以应用于各种场景，比如折叠菜单、手风琴效果、展开式列表等。通过动画效果，可以使页面更加交互友好，提升用户对内容的理解和操作。
腾讯云提供了一系列与云计算相关的产品，其中包括云服务器、云数据库、云存储等。这些产品可以帮助开发者快速搭建和部署云计算环境，提供稳定可靠的基础设施支持。
腾讯云产品推荐：
- 云服务器（CVM）：提供弹性计算能力，可根据业务需求灵活调整服务器配置。详情请参考：腾讯云云服务器
- 云数据库MySQL版（CDB）：提供高性能、可扩展的关系型数据库服务，适用于各种应用场景。详情请参考：腾讯云云数据库MySQL版
- 云对象存储（COS）：提供安全可靠的对象存储服务，适用于存储和管理各种类型的数据。详情请参考：腾讯云云对象存储
以上是关于CSS/Javascript为具有不同高度的项设置高度展开和折叠动画的完善且全面的答案。希望对您有帮助！
相关·内容
1回答
我怎样才能使这个动画更流畅？
、、、、
我有一个小的plnkr，我用它来玩AngularJS和ngAnimate。我现在正在学习关于css3转换和转换的知识。折叠/展开动画看起来很酷，但是元素在动画完成之前占据了它最终占据的所有空间。崩溃时情况更糟，因为文本会缩小并消失，但是容器会关闭，而不是优雅地关闭。
我一直在尝试模拟JQuery的slideDown动画，但是除非我知道我要动画的高度，否则我似乎无法让这个动画变得流畅。有人知道JQuery的slideDown函数如何能够平滑地动画可变高度元素吗？
浏览 3提问于2014-06-17得票数 2
回答已采纳
6回答
我想创建一个仅由类名驱动的展开/折叠动画(javascript用于切换类名)。
我只给了一个类max-height: 4em; overflow: hidden;
和另一个max-height: 255em; (我也尝试了值none，它根本没有动画效果)
这是动画：transition: max-height 0.50s ease-in-out;
我使用CSS转换来在它们之间切换，但是浏览器似乎正在动画所有那些额外的em，所以它在折叠效果中创建了一个延迟。
有没有一种方法(用css类名)没有副作用(我可以设置一个较低的像素数，但这显然有缺点，因为它可能会切断合法文本-这就是为什么它有这么大的价
浏览 1提问于2013-04-16得票数 61
回答已采纳
1回答
我试图创建一个像Bootstrap一样的平滑动画在AMP中可折叠。 现在，我可以通过切换一个类并使用CSS调整一些高度来创建一个可折叠对象，但是如果我这样做，我将为所有可折叠对象指定一个固定的高度，而且由于内容高度对于所有的块都不是相同的，所以我不能给出高度。 在JavaScript中，我可以计算内容的高度，并相应地对高度进行动画处理，但既然我们不能在AMP中使用JavaScript，有什么方法可以做到这一点吗？ 我尝试过用css来做这件事。我定义了两个类，一个通过将height设置为0来隐藏内容，另一个通过将height设置为auto来显示内容。它可以工作，但它没有任何动画。但是，如果我将
浏览 11提问于2019-05-18得票数 0
2回答
我在文章元素中展开和折叠动画到div上。
基于这个小提琴代码：
当div框被展开时("div.expandable")，我不希望将高度硬编码(锁定)留在一个特定的值，因此我通过删除高度值：el.css("height", ""); (动画完成后)来重置它。
在为折叠/关闭动画再次将高度设置为"0“之前，我将恢复高度(返回到136 it )。在重新设置动画之后，没有将动画折叠回height: 0。但是，如果在展开动画之后，将高度保持在136 if，那么折叠动画就能正常工作。
如果您注释掉了el.css("height", &
浏览 6提问于2014-01-28得票数 4
回答已采纳
1回答
动画作用于折叠，但不作用于展开。
我为max-height添加了css样式，但动画仅适用于菜单折叠。
<template>
<div>
<p>
<button @click="isShow = !isShow">click -- {{ isShow }}</button>
</p>
<ul ref="menu" :class="{ menu: true, fold: !isShow }">
<li>i
浏览 8提问于2021-07-10得票数 0
9回答
我有以下CSS定义：
.detailsCollapsed
{
display:none;
height:0%;
width:100%;
-webkit-transition:height 40s ease-in-out;
}
.detailsExpanded
{
display:block;
visibility:visible;
height:100%;
width:100%;
-webkit-transition:height 40s ease-in-out;
}
这些被应用于其中包含一些内容的div。
我还有一些javas
浏览 9提问于2010-07-23得票数 47
1回答
我制作了一个折叠菜单来替换选择表单控件，并且我想使用css3转换来使它平滑地展开/收缩。
这里有一个指向jsfiddle的链接：
为了达到想要的效果，我需要动画的每个链接的高度，但我不确定如何做到这一点。CSS3转换令人困惑。O_o
浏览 3提问于2012-04-30得票数 0
回答已采纳
4回答
引导手风琴-设置为特定高度
、、、、
我有一个鞋带手风琴，它有一个一英里长的列表，我想把打开的高度设置为大约200 to。当我在CSS中这样做时，手风琴就会打开，但是要达到完全高度，然后在打开后设置为200 it。
我尝试的不仅仅是折叠类，而是类中的折叠和折叠，所做的就是打开手风琴弹出而没有动画。
CSS：
.collapse.in, .collapse{
height: 200px;
overflow-y: scroll;
}
我需要在哪里设置高度，以便手风琴只打开到200 at，并在200 at停止动画？
示例：
浏览 3提问于2015-06-25得票数 4
回答已采纳
我想创建这样的东西：
但它应该在垂直和水平方向上扩展(和折叠)。你可以把它想象成一个展开成一个大div的按钮。但实际上，应该展开的是整个div，按钮只是其中的一部分(在div中)。
下面是一些提示HTML：
<div class="section">
<button type="button" class="collapsible">
Open collapsible
</button>
<div class="collapsible-content
浏览 42提问于2020-08-21得票数 4
我希望FlatList中的一行在用户单击时滚动到屏幕顶部。我目前使用的是scrollToIndex方法，但问题是我必须对顶部边距(从10到0)进行动画处理，才能将其刷新到屏幕顶部。我还有一个问题，如果用户单击一行以展开该行，而前一行已经展开，则前一行将折叠，导致原始scrollToIndex动画到屏幕顶部的某个位置。
我目前的两种选择是在前一行完成收缩后触发一个额外的scrollToIndex，或者使用scrollToOffset根据良好的旧数学值确定滚动到哪里。有没有办法在单击时通过索引或其他值计算出行偏移量的位置？
感谢任何人可能提供的任何帮助！
浏览 0提问于2017-09-30得票数 0
回答已采纳
我得到了几个内容不同的div(用户特定的)。这些div被折叠到10‘s以外的高度，它的头部的高度是多少。只要点击一下，它就会展开并显示整个内容。我不能使用简单的css魔术“高度:自动”是一个快速展开和折叠动画。最大高度和不同的解决方案不能按照我想要的方式工作，所以它必须用javascript来完成。
Javascript
//expand & collapse paper
var paperHead = document.getElementsByClassName('paperHead');
for (var i = 0; i < paperHead.leng
浏览 0提问于2017-12-01得票数 0
回答已采纳
1回答
角动画的目的是什么？
、、、、
一段时间以来，我一直在想，为什么要使用角度动画而不是CSS动画。在使用它们之前，我看到很少会考虑到的领域：
性能
在第一步中，我找到了这个，它只处理性能方面的事情。接受的答案对我来说并不令人满意，因为它指出，只要有可能，就应该使用CSS动画，这样就可以应用像在单独线程中运行动画这样的优化。这似乎不是真的，因为声明
角动画是建立在标准Web动画API之上的，并在支持它的浏览器上本地运行。
(强调地雷)
当我们查看时，我们可以看到，同样的优化可以应用于网页动画，也可以应用于表单中指定的CSS。
虽然可以使用ECMAScript来使用requestAnimationFrame HTML执
浏览 0提问于2018-04-03得票数 86
回答已采纳
4回答
我试图为一些以象限格式布局的html元素创建一个动画。在点击每个div，我希望他们扩展到100%的高度和宽度的容器和点击再次折叠回到他们的初始大小。这是一个类似的动画浏览器最大化和折叠回到他们原来的大小。
我目前拥有的是良好的工作，我只是希望动画不要将其他元素从屏幕上推开，也不要在标题消失时跳转。
我该怎么做？欢迎使用jQuery动画或css3动画。谢谢!
下面是我目前拥有的一个演示： Javascript
$(document).ready(function () {
$('.box1').on('click', function() {
浏览 4提问于2014-07-12得票数 0
1回答
我有一个列表框，其中有多个列表项。如果单击列表项，它将折叠并显示单击项的摘要：
我已经在网上搜索了相当一段时间，但没有任何好的解决方案。我对Win32非常陌生。任何关于如何处理这个问题的建议，比如我应该使用哪个控件。任何帮助都将不胜感激。
浏览 1提问于2016-10-03得票数 2
回答已采纳
我正在构建一个手风琴，并且在CSS转换、动画max-height方面遇到了问题。 我想要关闭一个项目和打开另一个同时运行的动画，而不是像现在这样一个接一个地运行。 此外，闭合过渡比开放过渡慢得多…… 我在JSFiddle上运行这段代码，但下面是我的代码： HTML： <div class="accordion">
<div class="accordion-item">
<div class="accordion-title">
Title 1
</div>
浏览 16提问于2020-12-14得票数 0
回答已采纳
2回答
我有一个功能性的垂直jquery carousel，因为我已经调整和修改了这里的脚本和示例：
我使用文本作为列表项，而不是图像。此脚本使用固定高度样式，我正在尝试合并自动扩展高度功能。基于li中的内容折叠和展开。
我已经尝试了css的一些方法，比如将某些元素设置为height:auto；或height:100%；，但似乎不起作用。
有没有人能告诉我，我应该把精力集中在如何根据内容自动扩展和折叠？我应该调整javascript而不是CSS吗？
只是在寻找洞察力。
浏览 0提问于2010-03-19得票数 0
例如，在实现这些可折叠项时：
我想到的第一种方法是在模型expandedItems: List ItemId中存储一个变量
若要验证某项是否展开，请检查其id是否位于列表中，以展开将其id添加到列表中的项，以折叠从列表中删除其id的项。
还有一些css专用的解决方案，比如这个。
与id列表相比，css的优点/缺点是什么？
浏览 5提问于2022-06-10得票数 -1
1回答
用动画单击整个表。
、、、
我有一个表，我希望能够单击表标题行，这将折叠表的其余部分，只留下标题行(然后展开)。经过大量的斗争，我能够让表实际上改变它的高度点击，但还没有能够得到动画触发。下面是我到目前为止拥有的css：
table {
height: 100%;
display: block;
overflow: hidden;
}
.collapsed {
animation-name: collapse;
animation-duration: 2s;
}
@keyframes collapse {
from { height: 100%; }
to { height: 40px;
浏览 1提问于2016-03-16得票数 2
回答已采纳
我有一个容器作为可折叠下拉菜单的头部，最大高度为30px。我正在切换一个".open“类，它将Javascript中的最大高度改为30000px onClick。 我正在尝试添加一个CSS转换，通过向容器类添加转换: 1s；来使其更加流畅。由此产生的效果是笨拙的，而且似乎是错误的: div将在与css元素中的1相等的超时后立即折叠(没有缓入/缓出)。也就是说，如果我添加了transition: 5s;，在5s之前页面上什么都不会发生，那么div将会快速关闭。 希望这是有意义的，谢谢！ --为清晰起见，共享代码： html： <section class="project
浏览 15提问于2021-10-20得票数 0
我有一个带有自定义单元格的UITable视图。有些单元格有一个可以展开/折叠的按钮。有时，调整大小的单元似乎在UI中跳转。
我使用的是Autolayout和动态高度计算通过heightForRowAtIndexPath:。我已经阅读了几个教程，包括，我正在使用它来研究这个问题。
若要复制该问题，请在表的中间滚动并展开几个单元格。点击一个部分显示的细胞。细胞似乎会跳跃，而不是停留在原地。
示例：
当我注释掉在选择一个单元格后滚动到单元格顶部的行时，问题就更加明显了。
我尝试了@DonMag的建议。对于小细胞来说，这个问题不会发生。当我将细胞高度增加到占屏幕高度的60%以上时，就发生了跳转动画
浏览 1提问于2019-05-16得票数 0
1回答
我想使用css转换创建一个可扩展的块。
.box {
width: 300px;
max-height: 30px;
overflow: hidden;
background: #aaa;
-webkit-transition: max-height 400ms ease-in-out;
-moz-transition: max-height 400ms ease-in-out;
-ms-transition: max-height 400ms ease-in-out;
-o-transition: max-height 400m
浏览 0提问于2013-07-09得票数 1
回答已采纳
中所描述的问题。
中提到的改进
我做了以下修改
high.I 添加了一个内部UIView，为了折叠和展开目的，内部UIView将属性剪辑设置为true<code>H 111</code>一个垂直的<UIView>D12</UIView>放置在内部UIView中，而底部约束设置为确实不知道。由于未知的原因，父UIStackView的底部约束必须是low，以便UI在折叠动画中保持在顶部。
这是我的结果。
如你所见，
展开动画工作得很好！For折叠动画，内部UIView会立即消失，没有任何动画。
你知道吗，为什么在崩溃的时候没有隐藏的动
浏览 54提问于2022-04-17得票数 0
回答已采纳
1回答
我正在使用Oridomi (oridomi.com) Javascript插件来实现纸张折叠动画。具体地说，我希望在页面加载时展开一个div (想象打开一本书)。
然而，我很难让unfold()方法工作，尽管它是一个可以通过插件调用的方法。
您可以从这个中看到，我只能让div向后折叠，而不是从折叠状态展开(实际上，我希望动画被反转)。
我的javascript函数-
(function(){ function init(){
var $domi = $('.unfold').oriDomi({ vPanels: 2, hPanels: 1, speed: 500, shadi
浏览 0提问于2013-05-03得票数 1
回答已采纳
我正在尝试对ExpandableListView的扩展和折叠进行动画处理。我的目标是应用编程接口级别15，所以有一个可用的方法expandGroup (int groupPos, boolean animate)。但是，它不会为组的扩展提供动画效果。我的代码如下：
m_expandList.setOnGroupClickListener(new OnGroupClickListener(){
public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id)
浏览 1提问于2012-08-31得票数 3
回答已采纳
我的网站上有一个问题：。我有几个手风琴菜单，这些菜单是我用纯css制作的，没有任何javascript，除了一个问题外，一切都很完美：
当我单击类别来展开标签时，所有其他与同一行的细节标记一起折叠的框都将从.div中展开它们的边框。有没有办法不使用javascript来解决这个问题？我试图只在details标签打开的情况下绘制边框，但是遇到的问题是边框比.div小，因为它只分配给details标记。最好的方法是能够从细节打开标记中选择父元素。然而，在做了一些研究后，这是不可能仅与css3。有人想办法解决这个问题吗？在移动设备上，它工作得很好，因为只显示了一行.
浏览 2提问于2020-12-27得票数 0
回答已采纳
1回答
我想为我的应用程序实现一个导航，它看起来像一个TreeView，但动画效果像一个TitledPane。也就是说，在为其内容展开/折叠项目时的过渡。
到目前为止，我所做的是嵌套多个手风琴，如下所示：
- TopAccordion
---- TitledPane
------- Accordion
----------TitledPane
----------TitledPane
----------TitledPane
---- TitledPane
------- Accordion
----------TitledPane
----------TitledPane
----------Tit
浏览 1提问于2013-05-17得票数 0
我的小提琴：
目标是通过单击图像来展开和折叠目标div。我的方法是从一个折叠的类开始，并显示:none。javascript移除类并允许显示div。代码起作用了，但我很痛苦地尝试将动作动画化。我正在加载jQuery和jQueryUI。这是我目前的代码：
$('img.activator').click(
function(){
if ($('#mobileSelectors').hasClass('collapsed')) {
$('#mobileSelectors').removeClass('c
浏览 3提问于2014-12-12得票数 0
回答已采纳
我正在用Android做一个可扩展的listview。ListView有10个项目。我有一个按钮显示更多/更少，当点击这个按钮时，我想从位置2展开/折叠到位置9(而不是像默认ExpandableListView.java那样折叠到0)。并具有动画效果。你能帮帮我吗!非常感谢。
浏览 0提问于2015-07-23得票数 0
1回答
我正在通过免费电子计算器，并试图制造一个电子计算器，还很早期，只是试图使大小和布局正确。
我使用CSS网格的按钮，但有一个问题，当我试图调整按钮的大小。
我有一个javascript函数，它为要显示在计算器上的每个按钮创建一个<button>元素，然后在相应的css网格区域属性中分配以匹配网格。
布局和功能工作得很好，当我试图调整“相等”按钮的大小时，问题就出现了，这个按钮位于第4列和第4行和第5行。
该按钮占用1列，但占网格的2行。
一旦我更改了css中按钮的height属性，这个特定的按钮就会折叠成1列和1行。
希望这是有意义的，如果没有的话，下面是codepen：
而html
浏览 0提问于2017-07-26得票数 2
回答已采纳
4回答
我正在尝试为弹性div实现一个简单的折叠/解开效果，即当元素的实际尺寸不是通过CSS设置的，因此不是可以确定的。因此，对于任意元素，我需要jQuery的width()和height()等效项；这些方法应该返回一些可以赋值给*.style.width/height的内容，以实现折叠/展开效果。这些方法也可以是setter，尽管不一定是微不足道的(或者不是？)
兼容性: IE8+和3个合适的组合:火狐、Chrome、Safari。除了“使用jQuery”之外，S.O.对此没有答案，我目前不想这么做。问题是我不需要支持像IE6/7和Netscape这样的老式浏览器。我希望我的代码是简单的，现代浏览器
浏览 0提问于2010-10-18得票数 9
回答已采纳
5回答
块滚动以及展开/折叠工具栏
、、、、
我在我的应用程序中使用Collapsible Toolbar。活动启动时，可折叠工具栏处于扩展状态，启用滚动，工作正常。但是现在我需要显示一个全屏错误布局，以防我的API失败。在这种情况下，我必须折叠工具栏，并阻止滚动效果。
错误布局显示重试按钮。在重试时，我再次调用API，如果API成功，我必须再次展开工具栏并启用滚动效果。
我能够用setExpanded(标志，动画)折叠工具栏，但在这种情况下，我无法阻止可折叠工具栏的滚动效果，同时显示错误布局。
我需要提供一种方法来阻止以及取消块滚动效果+展开/折叠工具栏。任何帮助都将是非常感谢的。!!！
浏览 2提问于2016-12-10得票数 4
回答已采纳
2回答
我正在使用javascript来制作div折叠/滑动的动画。虽然div中的内容是动态的，但javascript要求div具有设置的高度。我该如何让它工作，因为我不希望div比它的实际大小更大。我已经这样设置了div的高度：
<div id="main-div" style="overflow:hidden; height:95px;">
我尝试将高度设置为'auto‘，但当div幻灯片再次打开时，它没有滑到正确的高度。我需要计算高度吗？
浏览 1提问于2010-05-16得票数 1
1回答
动画化页面回流？
、、、
我正在切换div的内容(淡出旧内容，然后淡入新内容)，因为它们是略微不同的内容，当它们改变的时候，它们下面的所有内容都会有一个刺耳的重组。
我的问题是，有没有办法让这个动作变得顺畅呢？
我怀疑这样做的唯一可行方法是使用javascript提前确定开始和结束元素的高度(在我的例子中，我只处理垂直对齐移动的块)，并直接分配这些值。一旦我这样做，我相信CSS3转换将应用一个令人愉快的动画。
有没有一种方法可以在不指定显式维度的情况下实现这一点？我似乎回想起在某一时刻经历过以动画方式在页面上移动的项目。这给了我希望，它可以只使用CSS来完成。
浏览 1提问于2012-07-15得票数 5
回答已采纳
1回答
我想对UISearchbar的帧变化进行动画处理。我希望它可以在点击搜索按钮时展开和折叠。
我正在使用UIViewAnimationBlock进行动画制作
[UIView animateWithDuration:0.5
delay:0
options:UIViewAnimationOptionLayoutSubviews
animations:^{
//Set the fr
浏览 3提问于2013-03-09得票数 0
回答已采纳
我看过其他几个堆栈溢出问题，但一直找不到一个能回答我的具体问题。很多答案都说要使表视图部分可扩展，但我希望行是可扩展的，并且能够在展开时向行添加集合视图。而且，最好不需要任何外部库就可以完成这一任务。
我有一个UITableView部分，其中的行可以被点击以展开或折叠。折叠时，单元格在左边的垂直UIStackView中显示两行文本，在右边显示一个图像和一个向下箭头。下图显示了折叠视图，我可以使用AutoLayout约束使其工作。
展开时，应该在单元格中添加一个UICollectionView，并且该行应该有动画展开以显示集合视图。下图大致显示了它应该是什么样子。底部的灰色区域是集合视
浏览 3提问于2021-03-30得票数 0
回答已采纳
3回答
单击图像后全屏div
、、、
单击图像后，我可以在全屏上显示div吗？也许有一个不错的折叠打开动画。我试过没有动画片：
HTML图像：
<span class="image fit"><a href="#" target="_blank"><img src="images/image.png" alt="image" /></a></span>
HTML分区：
<div id="hidden">
</div>
CSS：
#hidden {
浏览 5提问于2017-11-23得票数 1
回答已采纳
当页面包含折叠下的CSS3动画，或者当用户向下滚动时隐藏的动画，您应该使用Javascript应用一个类来停止动画，还是浏览器不动画不可见的元素？
浏览 2提问于2015-02-07得票数 0
1回答
我试图折叠并展开一个具有jquery动画的表。我使用div的内部td，并将它的高度设置为0。当高度被动画为0时，我如何隐藏边框。
$('.table').find('td').css('overflow','hidden')
$('.table').find('td').children('div').animate(
{height: '0px',
浏览 5提问于2014-08-02得票数 0
回答已采纳
1回答
你好啊。我是ios的新手，我一直在布置这项任务。我需要制作一个可以容纳控件的可展开/可折叠菜单。
我不知道如何实现这一点，在互联网上搜索也没有什么成果--除了像这样的一些导航下拉菜单：
这是非常好的，但在我看来，这是导航的一部分..
有什么想法吗？提前感谢
编辑:显然这个问题太宽泛了..我将尝试详细说明。
我需要一个菜单，我可以放在某些视图控制器中-每个不同的视图控制器可以有不同的选项，通常还有许多不同的选项。因此，我需要添加一个菜单，它可以通过触摸箭头按钮来折叠/展开-如图片所示，可折叠菜单必须能够包含不同的控件，这取决于使用它的上下文。
经过更多的研究，我认为容器的使用可能是解决
浏览 0提问于2016-07-10得票数 0
4回答
我有一个问题，使细胞崩溃动画看起来一贯顺利。
形象胜过千言万语。下面是两个具有相同表视图的GIF：
折叠对于单元格"6“非常有效，但对于"5”则不起作用。看起来，在执行折叠动画之前，整个UITableView内容都会跳起来。
我是，而不是，为UITableView的rowHeight使用UITableViewAutomaticDimension。相反，我使用tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath)方法提供行高，并使用表视图的beginUpdates/endUpda
浏览 2提问于2018-05-23得票数 4
2回答
目标功能是通过单击在小提琴()中看到的图像来展开和折叠表单字段。目前，我已经使用.animate()扩展了工作，但是经过大量的修改之后，我无法找到一种崩溃的方法。
我的问题有两个: 1.当单击图像时，如何实现相反的动画来折叠窗体? 2. (奖金)如何使用.animate()来充分隐藏折叠时的CSS visibility？我实现这一目标的努力失败了。
代码如下：
HTML：
<input class='header-search-box' type='text' id='search-string' name='search-st
浏览 1提问于2014-08-14得票数 1
回答已采纳
3回答
浏览器可以搜索折叠的内容吗？
、、、、
有没有一种方法可以让浏览器(CTRL+F)搜索折叠的内容并展开特定的可折叠字段？任何折叠/展开方法都可以(JavaScript、jQuery插件、纯HTML/CSS等)，只要它能满足这个要求。
浏览 16提问于2014-10-24得票数 2
我在CSS中设置了一个最小高度为300px的元素：
<!-- HTML -->
<div id="summary"></div>
<div id="collapse"></div>
/* CSS */
#summary { min-height: 300px }
当我单击#collapse元素时，我希望#summary元素能够平滑地折叠到100px的高度。
$("#collapse").click(function() {
$("#summary").animat
浏览 1提问于2013-01-18得票数 2
回答已采纳
4回答
我正在尝试制作一个折叠视图的动画，其中包含一些子视图。
[UIView beginAnimations:@"advancedAnimations" context:nil];
[UIView setAnimationDuration:3.0];
CGRect aFrame = aView.frame;
aView.size.height = 0;
aView.frame = aFrame;
[UIView commitAnimations];
此动画运行良好，但仅适用于aView。子视图不会像预期的那样折叠。我如何让子视图也折叠起来？此外，有没有办法在折叠后重新计算原始大小
浏览 0提问于2012-05-15得票数 6
回答已采纳
2回答
我正试图在我的网站上实现一个响应性可折叠面板。我看到W3School在这个问题上有一个例子，但是它有缺陷。如果要在按下按钮以展开/折叠后调整窗口大小，则面板将无法正常缩放。
编辑:这里的截图：
就是他们的例子：
可折叠码
// Button Collapsible
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click"
浏览 5提问于2019-10-22得票数 1
回答已采纳
3回答
动态扩展可折叠内容
、、、
我想展开jQuery移动可折叠内容部分的可折叠内容。我知道我可以通过单击标题来展开它，但我不想让用户在每次页面刷新时都单击相同的部分。我知道我可以在html中设置一个变量，但这样做是行不通的，因为可折叠的内容在回发时仍然会关闭。
我需要这是与代码，而不是由用户完成。你可以在下面看到我失败的尝试。我使用VS2013的Web Forms项目中的模板作为开始，然后添加了移动版，并按照jQuery jQuery的中的说明进行操作，至少我是这么认为的。这是一个简化的测试页，但最终，我希望有一个ASP.NET变量来检测在回发时是否已经单击了某个节，如果已经单击了可折叠节，则再次打开它，这样用户就不必再次单
浏览 2提问于2014-02-25得票数 0
1回答
当使用引导折叠插件时，我在元素面板中注意到有一个元素的内联高度属性动画。我希望删除这个(从实际的核心 Collapse.js / Transition.js插件中删除)，因为我使用的是纯CSS3动画/转换。
原因有两个: a/ I不需要它，b/它与我自己的动画冲突，元素首先扩展到脚本计算的高度，然后在15 is的停顿后折叠到高度: 100% (如我所愿)
我强调:我不想覆盖它，我想要完全删除它(请不要回答重写)
浏览 4提问于2017-02-03得票数 0
因此，当第一次折叠时，引导折叠只不过是动画而已，就像我使用javascript将显示从“无”更改为没有动画的块，然而，当可折叠元素被隐藏时，没有抖动，而且所有事情都是正常的，这让我感到惊讶，但在那之后，每当您再次折叠元素时，它就会变得抖动。
这是小提琴：
而html，因为大多数涉及抖动崩溃的问题都是由html引起的(其他问题也包括填充，但我的元素中没有填充)：
<div class="container-fluid" style="height:100%;">
<a href="#social" class="btn&#
浏览 2提问于2016-08-06得票数 2
回答已采纳
我做了一个切换，如果你点击一个阅读更多链接，就会展开一个div：
$(".user-review-toggle").toggle(function(){
// Change the height of the element to auto so we can get that value, and use it in our expanding animation.
var currentUserReview = $(this).prev('.user-review');
currentUserReview.css('heigh
浏览 0提问于2011-12-19得票数 0
回答已采纳
4回答
崩溃中的bootstrap下拉，
、、、、
我使用的是Bootstrap 2.0.3，在div中有可折叠/可扩展的下拉菜单。当下拉菜单溢出div时，它们会被切断(但它们不应该被切断)。Jsfiddle演示：
在Bootstrap 2.0.2中，菜单不会被切断：
我通过使用css规则找到了半个变通方法，如下所示：
#stuff.in {
overflow: visible;
}
每当标记为“折叠”的div展开时，bootstrap就会添加“in”css类。
不幸的是，这个变通方法在Firefox中完全失效了。
有什么想法吗？我正在考虑降级到Bootstrap 2.0.2，但那将是痛苦的。
浏览 2提问于2012-08-13得票数 15
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
