Question

我正在尝试创建一个页脚，基本上当您单击链接时，它会打开一个绘制样式效果以显示更多链接。我点击链接时遇到的问题它在Safari中跳转到页面顶部（在iPhone和iPad上测试）（Chrome工作正常）。

我在jQuery中添加了以下内容：

jQuery('#click').click(function(event){
    event.preventDefault();
    // Do something
    return false;
});

然而，这并未解决问题。

完整代码位于codepen：https://codepen.io/tcfmark/pen/VxWxxa

更新：在iOS 7上的Safari 2中，它在使用Safari或Chrome iOS 11的iPhone上运行正常吗？

如果有人可以看看我出错的地方，那会很有帮助。

Answer 1

将javascript放在一边，如何使用新的details/summary元素。

*{
  box-sizing: border-box;
}

details{
  text-align: center;
}

details div{
  display: flex;
  
}

details div > div{
  flex: 1;
  padding: 10px;
  border: 1px solid #eee;
}

<details>
  <summary></summary>
  <div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</details>

jQuery单击在Safari上跳转到页面顶部

1 个答案: