semantic-ui下拉菜单不起作用
[英]semantic-ui dropdown menu do not work
问题描述
我一直在尝试使用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>
7 个解决方案
解决方案1
91 已采纳 2014-08-17 08:12:08
解决方案2
55 2014-11-05 21:06:51
一种方法是JS，你需要初始化脚本。 其他方法是在下拉菜单中添加“简单”类
<div class="ui simple dropdown item">
解决方案3
12 2015-02-01 23:00:49
正如已经提到的，你可以：
- 使用Javascript或。初始化您的下拉列表
- 使用
simple类。
这两种方式之间有一个非常重要的区别： 使用simple类，您不需要Semantic-UI Javascript来使您的下拉列表工作 。 simple类使用:hover选择器。
请注意，使用simple类（不是Javascript初始化）不会给你很好的下拉效果。
因此，以下代码将显示页面中没有Semantic-UI Javascript的下拉菜单：
<div class="ui simple dropdown item">
解决方案4
2 2016-10-19 14:48:47
如果用$('.ui.dropdown').dropdown();初始化$('.ui.dropdown').dropdown(); 还要确保您的页面引用dropdown.js
解决方案5
1 2018-12-01 13:46:35
如果给定的答案对你不起作用，请确保你没有使用bootstrap和semantic-ui
解决方案6
0 2018-11-03 10:30:17
当我添加上面的功能行时，它与我合作
<script> $(document).ready(function(){ $('.ui.dropdown') .dropdown(); }); </script>
解决方案7
0 2019-08-16 16:15:38
快速说明：
如果没有显示下拉列表并且使用semantic-ui在同一页面上加载了Bootstrap，那么请确保在bootstrap之后加载语义js库。
发生这种情况是因为bootstrap和semantic-ui都具有用于显示下拉菜单的相同.dropdown()方法。 也就是说，要在semantic-ui和bootstrap之间加载的最后一个库将覆盖所有其他存在的.dropdown()方法。
语义 - UI动态下拉列表
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.