使用jquery slideDown时，ipad上的动画完成后div标签消失答案

【问题标题】：Div tag disappears after the animation finishes on ipad when using jquery slideDown使用jquery slideDown时，ipad上的动画完成后div标签消失
【发布时间】：2013-10-21 04:43:08
【问题描述】：

我正在使用$('div#MainNavigation').slideDown('medium'); 向下滑动 div 标签。在 iPad 上完成动画后，它会消失。

我使用它的网站是 www.missbossyboots.com.au 点击左上角的标志激活滑动代码。

【问题讨论】：

在修复另一个问题时，我在 div#MainNavigation 的底部添加了一些填充，这已经解决了问题。

标签： jquery css ipad animation slidedown

【解决方案1】：

对我来说，与加文布鲁斯相反，我的 div 消失是因为底部的填充！

要修复它，我只需将 css "overflow: hidden;" 添加到 slideUp/slideDown 元素（在我的例子中是一个 div）。

【讨论】：

谢谢。这个解决方案也适用于我。我有一个
在我试图向上/向下滑动的
元素上也为我工作，非常感谢！
为我工作！非常感谢！！向下滑动后，我的数据表子行在 ios 上消失了。溢出：隐藏在“向下滑动的 div”上修复它！

【解决方案2】：

我知道我迟到了，但我在遇到这个问题时发现了这个问题，而 Gavin 的评论并没有解决我的问题（对于给定的设计，它看起来也不正确）。

当我把头撞到墙上时，因为这在所有浏览器中都能正常工作除了 IOS Safari，我终于发现了我案例中的罪魁祸首：

一个错位的z-index 标签。

这是我的代码的“轻量级”版本：

<div class="children"> <!-- this is the container, which is the target of a jQuery slideDown() -->
    <ul> <!-- this element would "pop" outside of the container after animation completed -->
        <li><a href="#">Menu Item 1</a><li>
        <li><a href="#">Menu Item 2</a><li>
        <li><a href="#">Menu Item 3</a><li>
    </ul>
</div>

最初，我将z-index: 3000; 应用于<ul> 元素。

在我将它从 ul 中移除并将其移动到 <div class="children"> 元素后，我的问题就消失了，并且 ul 在动画结束后留在了它所属的位置。

【讨论】：

【解决方案3】：

我遇到了相同（或相似）的问题 - 在 jquery slideDown() 转换之后，内容“跳出”它的容器。对我来说，它与 z-index 无关。我通过删除样式“位置：相对；”解决了它（使其“静态”）用于跳跃的元素。我仍然不清楚为什么会发生这种情况，并且删除 position:relative 并不总是一种选择。我正在使用 jquery 1.9.1，我不确定这是否是 jquery 中的一个错误。

【讨论】：