-1

我已经尝试处理这个问题 2 天，但我仍然无法让语义 UI 的 JavaScript 工作。这是我的所有代码。我的 jQuery 不是很好。我读了很多，但它不起作用。

        <!DOCTYPE html>
        <html>
        <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0,
        minimum-                      scale=0.5, maximum-scale=2.0, 
        user-scalable=yes" /> <!--自适应-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" charset="utf-8">
        <title>后台管理系统</title>
        <link rel="stylesheet" type="text/css" href="css/semantic.css">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.address.js"></script>
        <script type="text/javascript" src="js/semantic.js"></script>

        <style type="text/css">
        .diymenu{background-color: blue;margin: 0px 0px 0px 0px; padding-top:0px;}
        body{margin: 0px 0px 0px 0px;font-family: 微软雅黑;}
        </style>
        <script type="text/javascript">
        $(document).ready(function(){
        $('#drop').click(function(){
        $('#drop').dropdown('show');
        });
        });
        </script>
        </head>
        <body >

        <!--导航栏  -->
        <div class="ui  blue inverted menu">
        <a class="active item"><i class="home icon"></i>主页</a>
        <div class="right menu">
        <a class="item"><i class="mail  icon"></i>消息
        <div class="ui black circular   label">2</div></a>
        <a class="item"> 

        </a>
        </div>
        </div>

        <div class="ui dropdown item" id="drop">
        More <i class="dropdown icon"></i>
        <div class="menu">
        <a class="item"><i class="edit icon"></i>编辑个人信息</a>
        <a class="item"><i class="globe icon"></i>选择语言</a>
        <a class="item"><i class="settings icon"></i>账户设置</a>
        </div>
        </div>
        </body>
        </html>
4

2 回答 2

6

从http://semantic-ui.com/modules/dropdown.html#/usage的文档中，您应该使用 Javascript 初始化下拉列表（不需要进一步的 jquery 代码）：

$('.ui.dropdown').dropdown();

另请参阅http://jsfiddle.net/fd8qfyra/1/我认为没有问题。

于 2014-10-02T11:17:26.887 回答
0

在通过博客、youtube 等进行研究后，我找到了答案，实现了它，并为我提供了 Semantic UI 的折叠下拉功能

  1. 将 CSS 和 semantic.js 链接放在标题而不是正文中

  2. 给选择一个ID

3.仅使用下拉菜单初始化 ID：

$('#gender-select').dropdown();

于 2018-08-22T19:05:02.533 回答