语义 UI 下拉菜单不起作用，并显示 $(...).dropdown 不是一个函数
2018-02-28
4361
这个小任务带来了比它本该的更大的麻烦。我只想得到一个简单的下拉菜单，例如：
很简单，对吧？它甚至给了我代码？这能有多难？我首先在我的页面中导入了 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>
根据他们的 文档 ，我需要做的就是：
$('.ui.dropdown')
.dropdown()
;
在我的
ui-dropdown
类元素上，但它只是给我带来了问题。
<Uncaught TypeError: $(...).dropdown is not a function
我查看了以下帮助，但运气不佳：
- Semantic-UI 下拉菜单不起作用 #229
- semantic-ui 下拉菜单不起作用 但运气不佳
- 移动 jQUery 使其首先加载
- 添加 simple 类
看起来无论我做什么...脚本都没有初始化。
2个回答
您能否将代码发布到某个地方（jsfiddle 或 codesandbox），以便我们更轻松地检测问题？（抱歉，我的声誉还不足以对您的问题发表评论）
=======
我的回答：
似乎您的代码在 jQuery 库完全加载到浏览器之前就运行了。您可以尝试将执行代码块像这样包装到
$( document ).ready(function(){}) 中吗？
$( document ).ready(function() {
$('select').dropdown()
});
duonglk
2018-03-01
这与 Semantic UI 无关 。
这是由于 DOM 的呈现方式所致。就我而言，我有嵌套的代码片段（Rails Partials），并且 Semantic 似乎不喜欢在子视图中使用
.dropdown()
进行初始化。
因此，我通过在父视图中进行初始化解决了这个问题，并且它运行良好！
dsomel21
2018-03-01