Question

我遇到一个奇怪的问题，只出现在Safari浏览器中。我的DOM非常复杂，我试图创建一个Jsfiddle，但我搞砸了一切，所以我想请某人登录我的网站，如果可能的话。我将非常感激。

用户名：demo@demo.com

密码：演示

点击“测试主题1＆＃39;或者＆＃39;测试对象2＆＃39;在Chrome，Opera甚至最新的IE中，子元素toggle()很好。在Safari中，他们也会切换，但DOM并没有向下移动＆＃39;出于某种原因 - 换句话说，子元素只是出现，但底部的元素并没有很好地滑下来。

这是切换元素的代码：

$(".small").children(".topics").hide()


$(".small").click(function() {
    $(this).children(".topics").toggle("slide", {direction: "up"});
});

我知道这是一个简单的问题，但我甚至不知道应该从哪里开始调试，因为此功能在其他浏览器（Safari除外）中运行良好。

再次抱歉没有创建Jsfiddle，但我的DOM有点混乱，所以我没有成功在Jsfiddle创建一个好看的工作示例。

Answer 1

Safari尊重父级的高度（在这种情况下，您的按钮为.small），为40px。因此，当您在这些内部切换打开的内容时，不会将父级增加到超过40px。因此，父容器.subject的大小不会增加。要查看我的意思，请将.small的css更改为：

.small{
    width: 90%;
    height: auto;
    margin-top: .5em;
}

这不是你想要的效果，但为了让它在Safari中运行，你可能需要考虑在.topics按钮之外移动.small div，以便它们是兄弟姐妹。

这样的事情：

<div class="custom_button white small"></div>
<div class="topics"></div>
<div class="custom_button white small"></div>
<div class="topics"></div>

你的jQuery：

$(".small").next(".topics").hide()

$(".small").click(function() {
    $(this).next(".topics").toggle("slide", {direction: "up"});
});