语义UI下拉不起作用，并说$（...）。dropdown不是一个函数

Question

这项小任务造成了比它需要的更大的麻烦。我只想得到一个简单的下拉菜单：

很简单吧？它甚至给我代码？它能有多难？我首先在我的页面中导入了CDN。

<head>
  <!-- stuff -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
</head>

然后，我补充说：

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>

根据他们的documentation，我需要做的就是：

$('.ui.dropdown')
  .dropdown()
;

在我的ui-dropdown类元素上，但它只是给我带来了问题。

<Uncaught TypeError: $(...).dropdown is not a function

我看了下面的事情来帮忙，但没有太多运气：

看起来无论我做什么......脚本都没有初始化。

Answer 1

我相信这与语义UI无关，仅此而已！

这是由于我的观点呈现方式。我嵌套了Rails Partials，并在那里。从它的外观来看，当你在子视图中使用.dropdown()初始化时，Semantic不喜欢。因此，我通过简单地放入父母来修复它，它就像一个魅力！

Answer 2

你可以将你的代码发布到某个地方（jsfiddle或codesandbox），这样我们可以更容易地发现问题吗？（抱歉，我没有足够的声誉来评论您的问题）

=======

我的答案：

似乎您的代码在jQuery库完全加载到浏览器之前运行。你能尝试将你的执行代码块包装成$( document ).ready(function(){}吗？

$( document ).ready(function() { $('select').dropdown() });