ASP.Net MVC中的语义UI下拉菜单不起作用
[英]Semantic UI dropdown in ASP.Net MVC is not working
问题描述
Dropdown is not showing when clicked. 
单击时未显示下拉列表。 Other input fields are working as expected except this. 除此以外，其他输入字段均按预期工作。 The dropdown field is one of the field in form tag. 下拉字段是表单标签中的字段之一。
<div class="field">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Select Gender</div>
<div class="menu">
<div class="item" data-value="0">Male</div>
<div class="item" data-value="1">Female</div>
<div class="item" data-value="2">Other</div>
</div>
</div>
</div>
I've initialized it in the script tag just before the end of body tag. 我已经在body标签结尾之前的script标签中对其进行了初始化。 Also tried to put in head tag, or added document.ready as well as window.onload but all doesn't fix the problem. 还尝试放入head标签，或添加document.ready以及window.onload，但都不能解决问题。
<script>
$('.ui.dropdown').dropdown();
</script>
FYI, I've installed Semantic-UI ASP.NET MVC in Nuget. 仅供参考，我已经在Nuget中安装了Semantic-UI ASP.NET MVC。
I've tried the solutions below but to no avail. 我尝试了以下解决方案，但无济于事。
Semantic-ui dropdown is not working 语义用户界面下拉菜单不起作用
Semantic UI Dropdown is not showing the drop down but everything else is working 语义UI下拉列表未显示下拉列表，但其他所有内容均正常运行
2 个解决方案
解决方案1
0 2016-10-28 03:13:56
I managed to get the drop down list shown now, by adding this script in the head tag. 通过在head标签中添加此脚本，我设法获得了显示的下拉列表。
<script>
$(document).ready(function () {
$('#divDropdown').click(function () {
var clicks = $(this).data('clicks');
if (clicks) {
$('#divDropdown').removeClass('active visible');
$('#dropdownMenu').removeClass('visible');
} else {
$('#divDropdown').addClass('active visible');
$('#dropdownMenu').addClass('visible');
}
$(this).data("clicks", !clicks);
});
});
</script>
By right, it can be as simple that initializing it with .dropdown should work. 没错，使用.dropdown进行初始化应该很简单。 But somehow it's not. 但不是这样。
I'm still waiting for someone to propose a better solution than this. 我仍在等待有人提出比此更好的解决方案。 Thanks. 谢谢。
解决方案2
0 2016-11-08 19:33:10
- Include semantic CSS inside the head tag 在head标签内包含语义CSS
- Include jquery in the end of your body tag, then include semantic UI JS 在body标记的末尾包含jquery，然后包含语义UI JS
- Put your code from semantic dropdown inside 将您的代码从语义下拉列表放进去
$(document).ready(function () { //code goes here });
this way it will be executed after everything loads (jquery and semantic) and it will work.这样，它将在所有负载（jquery和语义）加载后执行，并且将起作用。
Example: 例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Test semantic</title>
<link rel="stylesheet" type="text/css" href="semantic2/semantic.min.css">
</head>
<body>
<div class="field">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Select Gender</div>
<div class="menu">
<div class="item" data-value="0">Male</div>
<div class="item" data-value="1">Female</div>
<div class="item" data-value="2">Other</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="semantic2/semantic.min.js"></script>
<script>
$(document).ready(function () {
$('.ui.dropdown').dropdown();
});
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.