() Safari问题

Question

我有一个奇怪的问题，它只存在于Safari浏览器中。我的DOM非常复杂，我试图创建一个Jsfiddle，但是我把所有的事情都搞砸了，所以如果可能的话，我想请别人登录我的网站。我将非常感激。

链接：http://www.Lynxapp.io

用户名: demo@demo.com

密码:演示

在你点击Chrome，Opera，甚至是最新的IE中的'Test 1‘或'Test 2’之后，子元素toggle()就很好了。在Safari中，它们也会切换，但是DOM不会因为某种原因而“向下移动”-换句话说，子元素只是显示出来，但是底部的元素不能很好地向下滑动。

这是切换元素的代码：

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


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

我知道这是一个简单的问题，但我甚至不知道从哪里开始调试，因为这个特性在其他浏览器(除了Safari)中工作得很好。

再次为没有创建Jsfiddle而感到抱歉，但是我的DOM有点混乱，所以我无法在Jsfiddle创建一个好看的工作示例。

Answer 1

Safari尊重父级的高度(在本例中，使用.small的按钮)为40 in。因此，当您切换打开的东西在这些，它并没有增加父母超过40 So。因此，父容器.subject的大小不会增加。要理解我的意思，请将.small的css改为：

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

这并不完全是您想要的效果，但是要使它在Safari中工作，您可能需要考虑将.topics div移到.small按钮之外，以便他们是兄弟姐妹。

就像这样：

<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"});
});