<分区>
<分区>
我的 fiddle :http://jsfiddle.net/b2stctr8/
目标是通过单击图像来展开和折叠目标 div。我的方法是从一个带有 display:none 的折叠类开始。 javascript 删除类并允许显示 div。该代码有效，但我在尝试为 Action 设置动画时遇到了痛苦的时间。我正在加载 jQuery 和 jQueryUI。这是我当前的代码:
$('img.activator').click(
function(){
if ($('#mobileSelectors').hasClass('collapsed')) {
$('#mobileSelectors').removeClass('collapsed', 200);
} else {
$('#mobileSelectors').addClass('collapsed', 200);
}
});
回顾人们在 StackOverflow 上遇到的类似情况，我尝试重新安排 switchClass 和 toggleClass 的函数，如解决方案中所述。我没有成功。关于如何为这个函数设置动画有什么建议吗？
最佳答案
我想我得到了你想要的。
我已经在您的代码中添加了一堆 CSS。我会尽力解释。
#mobileSelectors {
background: yellow;
height:auto;
max-height:500px;
text-align:center;
display:block;
line-height:100px;
margin:0;
-webkit-transition: max-height 0.5s ease;
-moz-transition: max-height 0.5s ease;
-o-transition: max-height 0.5s ease;
transition: max-height 0.5s ease;
}
#mobileSelectors.collapsed {
max-height:0px;
overflow:hidden;
}
首先，您只需要在基础元素上定义过渡。所以我已将其从 .collapsed 选择器中删除。
您也不能转换 display 属性。因此，您需要转换不同的属性。在我的 fiddle 里。我使用 overflow:hidden 将折叠状态的 max-height 设置为“0”。这会导致容器不显示。
在对象的选择器上，您通过将 max-height 设置为高于容器的高度来重置这些值。在本例中，我使用了 500px，然后将 height 设置为 auto。这样做是允许容器采用其内容的高度而不是设置硬高度。
我还将过渡值更改为仅过渡 max-height 而不是 all。
-webkit-transition: max-height 0.5s ease;
-moz-transition: max-height 0.5s ease;
-o-transition: max-height 0.5s ease;
transition: max-height 0.5s ease;
最后，我将 Jquery 更改为使用 .toggleClass。
$('img.activator').click(
function(){
$('#mobileSelectors').toggleClass("collapsed");
}
);
关于javascript - 使用 jQuery UI 或 CSS 的动画 addClass 和 removeClass，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27452226/
相关文章：
javascript - Coffeescript 类 mixin 不适用于构造函数
javascript - Backbone.js/jQuery 表单提交
javascript - 单击 AJAX 调用后附加 AngularJS
javascript - 如何使 SVG 在 DOM 中不占用空间？
javascript - 在居中的 JavaScript 创建的数组列表中垂直对齐文本和 float 图像
javascript - 如何在 MutationObserver 中添加的节点上使用 querySelectorAll
javascript - 当 key 未知时在 ngFor 中解析嵌套的 JSON