Question

背景：由于安全原因，我们无法使用完整的语义ui库。所以我想尝试单独的语义ui下拉模块，因为它是很多数据输入场景的非常好的解决方案。

以下代码在我引用完整库时起作用，但在引用单个模块时不起作用。

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />

<link rel="stylesheet" href="~/lib/semantic-ui-dropdown/dropdown.css"/>
</head>
<body>

<select class="ui dropdown">
    <option value="1">Email</option>
    <option value="2">Text</option>
</select>
<script src="~/lib/jQuery/dist/jquery.js"></script>
<script src="~/lib/semantic-ui-dropdown/index.js"></script>
<script src="~/lib/semantic-ui-dropdown/dropdown.js"></script>
<script>
    $('.ui.dropdown').dropdown();
</script>
</body>
</html>

我挖掘了问题，发现生成的html如下所示：

<div class="ui dropdown selection" tabindex="0">
    <select>
    <option value="1">Email</option>
    <option value="2">Text</option>
    </select>
    <i class="dropdown icon"></i>
<div class="text">Email</div>
<div class="menu" tabindex="-1">
<div class="item active selected" data-value="1">Email</div>
<div class="item" data-value="2">Text</div>
</div></div>

结果是一个很大的UI框，就像控件一样显示＆＃34; Email＆＃34;当你点击它时，没有任何反应。

我认为问题可能是＆＃34;选择＆＃34; class添加到顶级div的末尾。只是我的猜测。

有人能说出我做错的地方吗？真的想让这个工作。喜欢语义ui下拉解决方案。

Answer 1

找到了这个问题的原因。

semantic-ui-dropdown依赖于语义转换...

在语义u-dropdown之前只引用语义转换。

Answer 2

只需将其添加到index.html中的结束脚本中

<script>
  function callDropdown(){
    $('.ui.dropdown')
  .dropdown();
  }
  setTimeout(callDropdown, 3000);

语义UI下拉单个模块不起作用

2 个答案: