Question

我已经尝试了2天处理这个问题，但我还是无法使用Semantic 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>

Answer 1

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

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

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

Answer 2

在通过博客进行调查之后，youtube等我找到了答案，实现了答案，并为我提供了具有语义UI的可折叠下拉菜单功能

将CSS和语义.js链接放在标题内，而不是正文内
提供选择ID

3. 仅通过下拉菜单初始化ID：

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

语义UI下拉无法正常工作

2 个答案: