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

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 中的 iPad 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>