Question

在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>

谢谢！

Answer 1

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

你可以尝试更高版本的safari来测试兼容性。

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

Answer 2

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

向下滑动和向上效果有效，但在Safari中却没有。

具有误导性。实际上，transform属性可以正常工作并且它在Windows上的Safari（5.1.7）版本上都具有预期的行为（它“向下滑动”）（我刚才测试了）和OS X上的现代版Safari。

自http:// 3.1版以来， CSS 属性transform在Safari上可用，因为您可以查看here。

不工作的是transtion效果。对于那个，您需要更新的Safari，请阅读here。

希望它有所帮助。

我的代码在Safari上不起作用

2 个答案: