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

Question

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

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

Answer 1

您需要查看Getting Started 页面并通读。

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

来自GitHub - Ratchet 文档。

Ratchet 旨在响应来自移动设备的触摸事件。 为了使用鼠标点击事件（用于桌面浏览和测试）， 你有几个选择：在 Chrome 中启用触摸事件模拟（找到 在 Web 检查器首选项的覆盖选项卡中）使用 像 fingerblast.js 这样的 JavaScript 库来模拟触摸事件 （最好只从桌面设备加载）

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

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