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

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检查器首选项的覆盖选项卡中）使用a   像fingerblast.js这样的JavaScript库来模拟触摸事件   （理想情况下仅从桌面设备加载）

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

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