为什么我无法打开此 SLDS 选择列表?

Why can't I get this SLDS picklist to open?

我想使用找到的 SLDS 选择列表 here

我在我的页面中使用了其他几个 SLDS 元素,它们工作正常,我已经包含了必要的 SLDS css。

选择列表在他们提供的示例中实际上不起作用,所以我想知道是否需要额外的配置?文档没有提到任何内容。

谁能告诉我问题出在哪里?

根据我阅读 SLDS 文档后的理解,SLDS 只是 CSS "framework"。要使选择列表工作(打开),您需要包含一些 Javascript,更具体地说,通过向元素(选择列表)添加 class slds-is-open,选择列表是 "opened"。将 class 应用于下面所述的 div。

<div class="slds-picklist slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open" aria-expanded="true">

由于 SLDS 的安装非常复杂,因此我无法真正制作演示,但希望这对您有所帮助。

嗯,这些下拉菜单需要某种 javascript 或 jquery,因此您必须包含一个文件。 CSS 只是对内容进行样式设置并不能使其正常工作 XD

如果您只使用桌面应用程序(没有 SalesForce1),无需添加代码即可使其工作的简单方法是删除 trigger--click

就让div这样:

<div class="slds-dropdown-trigger slds-is-open">  *//your list//*  </div>

当您将鼠标放在 图标上时它会起作用。

它在 SalesForce1 中会有一个奇怪的行为,因为你不能在没有 "clicking" 屏幕的情况下放置手指 "over",牢记这一点.

PS:slds-dropdown-trigger 目前在 SLDS 文档中 已弃用 ,请记住这一点。

如果你对 JS 不满意,你可以使用 this JS 库

或在点击事件上添加 slds-is-open class