P H*_*ans 46 html javascript semantic-ui
我一直在尝试使用Semantic-UI构建菜单.我无法让下拉菜单工作.我拿了一份菜单示例页面的副本,然后拉出除分层菜单以外的所有内容,并将其放在一个单独的文件中.尽管没有错误,但只有下拉菜单才会起作用.谁能告诉我我错过了什么？
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Script-Type" content="text/jscript" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" type="text/css" class="ui" href="http://semantic-ui.com/build/packaged/css/semantic.min.css">
<link rel="stylesheet" type="text/css" href="http://semantic-ui.com/stylesheets/semantic.css">
<script src="http://semantic-ui.com/javascript/library/jquery.min.js"></script>
<script src="http://semantic-ui.com/javascript/library/history.js"></script>
<script src="http://semantic-ui.com/javascript/library/easing.js"></script>
<script src="http://semantic-ui.com/javascript/library/ace/ace.js"></script>
<script src="http://semantic-ui.com/javascript/library/tablesort.js"></script>
<script src="http://semantic-ui.com/javascript/library/waypoints.js"></script>
<script src="http://semantic-ui.com/build/packaged/javascript/semantic.min.js"></script>
<script src="http://semantic-ui.com/javascript/semantic.js"></script>
</head>
<body class="menu" >
<div class="ui tiered menu">
<div class="menu">
<a class="active item">
<i class="users icon"></i>
Friends
</a>
<a class="item">
<i class="grid layout icon"></i> Browse
</a>
<a class="item">
<i class="mail icon"></i> Messages
</a>
<div class="right menu">
<div class="item">
<div class="ui icon input">
<input type="text" placeholder="Search...">
<i class="search icon"></i>
</div>
</div>
<div class="ui dropdown item">
More <i class="icon dropdown"></i>
<div class="menu">
<a class="item"><i class="edit icon"></i> Edit Profile</a>
<a class="item"><i class="globe icon"></i> Choose Language</a>
<a class="item"><i class="settings icon"></i> Account Settings</a>
</div>
</div>
</div>
</div>
<div class="ui sub menu">
<a class="active item">Search</a>
<a class="item">Add</a>
<a class="item">Remove</a>
</div>
</div>
</body>
</html>
Cyz*_*far 94
您需要像这样初始化您的下拉列表:
$('.ui.dropdown')
.dropdown();
有更多的信息HERE
小智 56
一种方法是JS,你需要初始化脚本.其他方法是在下拉列表中添加"简单"类
<div class="ui simple dropdown item">
Tom*_*Tom 12
正如已经提到的,你可以:
simple课程.这两种方式之间有一个非常重要的区别:使用simple类,您不需要Semantic-UI Javascript来使您的下拉列表工作.本simple类使用:hover选择.
请注意,使用simple类(不是Javascript初始化)不会给你很好的下拉效果.
因此,以下代码将显示页面中没有Semantic-UI Javascript的下拉菜单:
<div class="ui simple dropdown item">
小智 5
当我添加上面的功能行时它对我有用
<script>
$(document).ready(function(){
$('.ui.dropdown') .dropdown();
});
</script>快速说明：
如果下拉列表没有显示，并且 Bootstrap 已经与语义 ui 加载在同一页面上，那么请确保在引导后加载语义 js 库。
发生这种情况是因为 bootstrap 和语义用户界面都具有.dropdown()用于显示下拉菜单的相同方法。也就是说，在语义用户界面和引导程序之间加载的最后一个库将覆盖所有其他.dropdown()存在的方法。