语义 UI 下拉菜单未显示下拉菜单，但其他一切正常答案

【问题标题】：Semantic UI Dropdown is not showing the drop down but everything else is working语义 UI 下拉菜单未显示下拉菜单，但其他一切正常
【发布时间】：2023-03-06 00:18:01
【问题描述】：

我在我的 ASP.NET Web 窗体应用程序中使用 Semantic UI Dropdown。它在this fiddle 中工作正常。但是在我的应用程序中，单击选择器 div 时它没有显示下拉菜单。此外，我可以通过搜索来选择元素，但在这种情况下，下拉菜单也不会显示。当我使用 Firefox 检查时，我发现 display: none 属性对于 .menu 类没有改变。当我研究 SO 时，我发现了这些相关的问题：Semantic-ui dropdown is not working 和semantic UI dropdown not working。我尝试了这些解决方案，但似乎都没有奏效。我检查了我项目中的其他 css，它们都没有显示任何冲突。那么，它有什么问题呢？您可以在 fiddle 中找到我的下拉代码。

【问题讨论】：

长镜头，但也许你的 CSS 文件中的 .menu 类有一个 display:none !important; 属性？
@SlavenkoMiljic 实际上我使用的是原始 css，但其中没有 !important。另外，我尝试使用它但没有效果。

标签： javascript jquery html css semantic-ui

【解决方案1】：

有时您必须初始化语义的 JS 部分。尝试在窗口的.onLoad() 中调用.dropdown() 函数。

window.onload = function(){
    $('.ui.dropdown').dropdown();
};

【讨论】：

【解决方案2】：

您不能使用多个菜单类！ . 只需阅读文档： http://semantic-ui.com/modules/dropdown.html 。我编辑了你的小提琴，它现在可以工作了：

<div id="itdd" class="ui dropdown search button" style="background:maroon; color:white">
<span class="text">Click to select</span>
<div class="menu">
    <div class="item" data-value="1"><i class="fa fa-rupee"></i>&nbsp;&nbsp;Currency</div>
    <div class="item" data-value="2"><i class="fa fa-rupee"></i>&nbsp;&nbsp;Currency</div>
    <div class="item" data-value="3"><i class="fa fa-rupee"></i>&nbsp;&nbsp;Currency</div>
    <div class="item" data-value="1"><i class="fa fa-rupee"></i>&nbsp;&nbsp;Currency</div>
    <div class="item" data-value="1"><i class="fa fa-rupee"></i>&nbsp;&nbsp;Currency</div>
    <div class="item" data-value="1"><i class="fa fa-rupee"></i>&nbsp;&nbsp;Currency</div>
</div>

这里： http://jsfiddle.net/ow2by6av/7/

【讨论】：

我已经试过了。你可以在这个小提琴更新中看到它：jsfiddle.net/ow2by6av/4。但是在小提琴中它可以工作但不在我的网站页面中。问题不在于显示 1 项，而在于完整的下拉列表。
嗯，我认为问题出在 ASP.NET 布局上，所以要调试它，只需运行应用程序并从浏览器中提供源代码

【解决方案3】：

在我的例子中，我将minchars 设置为大于 1。在这种情况下，单击下拉菜单不会呈现菜单。

【讨论】：