jQuery slideToggle 只是显示和隐藏，但动画不正确

Posted 2023-02-25

【中文标题】jQuery slideToggle 只是显示和隐藏，但动画不正确

【英文标题】：jQuery slideToggle just shows and hides but doesn't animate correctly

【发布时间】：2012-08-06 22:14:36

【问题描述】：

在this example 中，我的 div 容器只是隐藏和显示，但不执行 awesome jQuery animation。

$('.button').click(function() 
    $('.class1').slideToggle();
);

谁能告诉我为什么？我知道表格上的动画不能正常工作，但在 div 上应该没问题。

更新 感谢所有的答案。我缺少的信息是绝对位置会从 DOM 中删除元素。是的，我知道我应该把样式放在 CSS 中——这个版本只是为了快速测试，但感谢您的回答！！！

【问题讨论】：

出于兴趣，页面上是否有 jQuery 和 jQuery UI，我发现如果还包含 jQuery UI，则上滑/下滑不起作用。

【参考方案1】：

.slideToggle() 将元素的高度设置为 0% - 100%，同时隐藏其子元素。

通过在整个小提琴中使用 position:absolute，您正在从 DOM 流中删除子元素并干扰父元素逐渐隐藏其子元素的能力。

如果您将溢出设置为隐藏，并从子项中删除 position:absolute，这将正常工作。

http://jsfiddle.net/7xzMa/6/

【讨论】：

嗯，这不好，因为我需要这个布局>。

这在我的情况下效果很好，我必须将宽度设置为 100%，因为我想要一个全宽面板下拉，然后我简单地使用了 $('.toggleButton').on("click" , 函数 () $('#myHiddenDiv').slideToggle(700); );

【参考方案2】：

更新了您的 FIDDLE - http://jsfiddle.net/7xzMa/14/ --- 清理了 div，您应该将 css 放入样式表中，以便于编辑。 “显示”应设置为“无”。除非您希望它可见，否则单击隐藏。 http://jsfiddle.net/7xzMa/8/

【讨论】：

添加了缓动功能，打开更流畅goodluck jsfiddle.net/7xzMa/9

您已经编写了所有的 css，只需添加一个引用您 css 表的 clas="divname" .divname 然后添加您的所有样式 为您更新 css 您的位置有什么问题？ jsfiddle.net/7xzMa/14

您需要更好地构建您的 div。如果您的容器 div 是 100px 并且您希望其中有 2 个 div，请不要使用绝对位置，请告诉 1 div 宽度：40px 浮动：左。下一个 div 是 width:60px;浮动：对；如果添加填充，请确保减去总宽度。

【参考方案3】：

Artur，我的建议是完全重构您的代码，这有太多事情要做了。简短而简单总是最好的。我首先要摆脱 html 中的“样式”属性。确保将样式放入 CSS 中（这样更简洁、更易于维护——比从多个标签中删除样式要好得多）。 刚刚给你做了个demo，希望对你有帮助！随意使用它！快乐编码！ http://jsfiddle.net/7xzMa/17/

【参考方案4】：

使用 JQuery UI

$(document).ready(function() 
    $('.button').click(function() 
        $('.class1').toggle('slide',direction: 'up',500);
    );
);