语义UI下拉列表未显示下拉列表，但其他所有内容均正常运行

Question

I am using Semantic UI Dropdown in my ASP.NET Web Forms application. Its working fine in this fiddle . But in my application it is not showing the drop down when clicked on the selector div. Also, I can select the elements by searching but in that case too the drop down is not showing. When I inspected using Firefox, I found that display: none property is not changing for .menu class. When I researched on SO, I found these related questions: Semantic-ui dropdown is not working and semantic UI dropdown not working . I tried the solutions but none of them seem to work. I checked other css in my project none of them shows any conflict. Then, what is wrong with it? You can find my dropdown code in the fiddle.

Answer 1

Sometimes you'll have to initialize the JS part of semantic. Try calling the .dropdown() function in the .onLoad() of the window.

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

Answer 2

You cant use multiple menu classes !! . Just read the doc : http://semantic-ui.com/modules/dropdown.html . I edit your fiddle, and it works now:

<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>

Here: http://jsfiddle.net/ow2by6av/7/

Answer 3

就我而言，我将minchars设置为大于1。在这种情况下，单击下拉列表不会呈现菜单。