我的代码在 Safari 上不起作用答案

【问题标题】：My code doesn't work on Safari我的代码在 Safari 上不起作用
【发布时间】：2015-09-06 22:12:57
【问题描述】：

在 Google Chrome 中查看 fiddle 效果很好，上下滑动效果也可以，但在 Safari 中却不行。我究竟做错了什么？是jQuery还是css？

代码如下：

jQuery:

$(function() {
  $('.dropdown').hide();
  $('.dropdown-toggle').click(function(e) {
    $('.dropdown').slideToggle(400);
    $('.dropdown-toggle').slideDown('active');
    $('.dropdown').toggleClass('is-active');
    return false;
  });
  $(document).click(function() {
    if ($('.dropdown').is(':visible')) {
      $('.dropdown', this).slideUp();
      $('.dropdown').removeClass('is-active');
    }
  });
});

CSS：

body {
  padding: 2em;
}
a {
  text-decoration: none;
  color: #000;
}
nav {
  position: relative;
}
.dropdown-toggle {
  padding: .5em 1em;
  background: #777;
  border-radius: .2em .2em 0 0;
}
.dropdown {
  position: absolute;
  margin-top: .5em;
  background: #777;
  min-width: 12em;
  padding: 0;
  top: 0;
  left: 0;
  -webkit-transform: translateY(-60px);
  -ms-transform: translateY(-60px);
  transform: translateY(-60px);
  transition: transform .3s
}
.dropdown.is-active {
  -webkit-transform: translateY(30px);
  -ms-transform: translateY(30px);
  transform: translateY(30px);
  display: block
}
ul.dropdown li {
  list-style-type: none;
}
ul.dropdown a {
  text-decoration: none;
  padding: .5em 1em;
  display: block;
}

HTML：

<nav><a class="dropdown-toggle" href="#" title="Menu">Menu</a>
  <ul class="dropdown">
    <li><a href="#">Menu Item</a>
    </li>
    <li><a href="#">Menu</a>
    </li>
    <li><a href="#">Settings</a>
    </li>
    <li><a href="#">Search</a>
    </li>
  </ul>
</nav>

谢谢！

【问题讨论】：

它对我有用。您使用的是哪个版本的 Safari？
它在 9.0 版 (11601.1.56) 上也适用于我。正如@David 所说，您使用的是哪个版本？
@David 唯一适用于 Windows 的版本 5.1.7
@FidanHakaj Windows 版本 5.1.7。
@J.Doe 菜单动画在我的 Safari 上运行良好。小心，Windows 的版本可能是旧版本，因为 Apple 停止了其开发 AFAIK。

标签： jquery css google-chrome safari

【解决方案1】：

IMO 您的问题令人困惑。这句话：

上下滑动效果有效，但在 Safari 中无效。

具有误导性。实际上，transform 属性 确实有效 并且它在 Windows 上的 Safari（5.1.7）版本（我刚刚测试过）上都具有预期的行为（它“上下滑动”） ) 以及 OS X 上现代版本的 Safari。

CSS 属性 transform 在 Safari 3.1 版本中可用，您可以查看 here。

它不起作用的是transtion 效果。对于那个你需要更新的 Safari，阅读here。

希望对你有帮助。

【讨论】：

感谢您的信息，并评论我不知道哪个部分功能不正确的令人困惑的句子，所以我一般来说。
@J.Doe：如果您认为我给您的信息是正确的，请将答案标记为“已接受”。

【解决方案2】：

我无法添加评论，所以我会回答。

您能否尝试使用更高版本的 safari 来测试兼容性。

可能是由于过时的 javascript 引擎？

【讨论】：

我无法在 Windows 上安装更新版本，因为没有更多更新。