[英]Semantic UI dropdown in ASP.Net MVC is not working
单击时未显示下拉列表。 除此以外,其他输入字段均按预期工作。 下拉字段是表单标签中的字段之一。
<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>
我已经在body标签结尾之前的script标签中对其进行了初始化。 还尝试放入head标签,或添加document.ready以及window.onload,但都不能解决问题。
<script>
$('.ui.dropdown').dropdown();
</script>
仅供参考,我已经在Nuget中安装了Semantic-UI ASP.NET MVC。
我尝试了以下解决方案,但无济于事。
通过在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>
没错,使用.dropdown进行初始化应该很简单。 但不是这样。
我仍在等待有人提出比此更好的解决方案。 谢谢。
$(document).ready(function () { //code goes here });
例:
<!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.