css - 为什么棘轮组件无法正确渲染

Question

这是我的小提琴。我从Segmented Control添加了 css 组件并添加了相关库，但没有按预期工作，就像在网站中一样

<div class="segmented-control">
... Control components...
</div>
<div class="card">
... control content
 </div>

Answer 1

您将需要查看入门页面，并通读它。

这些段在 jsFiddle 中不起作用，因为它们只响应“触摸”事件（如在移动设备上）而不是“点击”事件（如在 PC 上）。

来自GitHub - Ratchet文档。

Ratchet 旨在响应来自移动设备的触摸事件。为了使用鼠标点击事件（用于桌面浏览和测试），您有几个选项： 在 Chrome 中启用触摸事件模拟（在 web 检查器首选项的覆盖选项卡中找到）使用 JavaScript 库（如 fingerblast.js）来模拟触摸事件（理想情况下仅从桌面设备加载）

此外，由于某些原因，缺少某些样式。

• 组件示例具有框架中没有的额外样式。
• 您的 jsFiddle 缺少<div class="content">包装器。
• 这个 jsFiddle更接近，但由于上面的触摸事件问题，仍然无法完全工作，但至少它为您指明了正确的方向。