Metro UI CSS - 下拉菜单无效

I am using METRO UI CSS. I implemented dropdown menu . It looks good. But the dropdown list is not showing.

我正在使用METRO UI CSS。我实现了下拉菜单。看上去不错。但是下拉列表没有显示。

I used example from the following link:

我使用以下链接中的示例：

带下拉菜单的水平菜单。

I added the following files from the latest METRO UI CSS package to my html code.

我将最新的METRO UI CSS包中的以下文件添加到我的html代码中。

<link href="metroui/css/metro-bootstrap.css" rel="stylesheet">
<link href="metroui/css/metro-bootstrap-responsive.css" rel="stylesheet">
<link href="metroui/docs/css/iconFont.css" rel="stylesheet">
<link href="metroui/docs/js/prettify/prettify.css" rel="stylesheet">
<link href="metroui/docs/css/docs.css" rel="stylesheet">

<!-- Load JavaScript Libraries -->
<script src="metroui/js/metro-dropdown.js"></script>
<script type="dropdown.js"></script>
<script src="metroui/docs/js/jquery/jquery.min.js"></script>
<script src="metroui/docs/js/jquery/jquery.widget.min.js"></script>
<script src="metroui/docs/js/jquery/jquery.mousewheel.js"></script>
<script src="metroui/docs/js/prettify/prettify.js"></script>
<script src="metroui/docs/js/holder.js"></script>

<!-- Metro UI CSS JavaScript plugins -->
<script src="metroui/docs/js/load-metro.js"></script>

Any help will be appreciated !

任何帮助将不胜感激！

5 个解决方案

#1

Try the following - it's working fine for me:

尝试以下 - 它对我来说很好：

<script src="Scripts/jquery-2.1.3.min.js"></script> 
<script src="Scripts/jquery-ui.min.js"></script> 
<link href="Scripts/metro-ui/css/metro-bootstrap.css" rel="stylesheet" />
<link href="Scripts/metro-ui/css/metro-bootstrap-responsive.css" rel="stylesheet" />
<link href="Scripts/metro-ui/css/iconFont.css" rel="stylesheet" />
<script src="Scripts/metro-ui/js/jquery.min.js"></script>
<script src="Scripts/metro-ui/js/jquery.widget.min.js"></script>
<script src="Scripts/metro-ui/js/jquery.mousewheel.js"></script>
<script src="Scripts/metro-ui/js/metro.min.js"></script> </pre>

And also add class="metro" to your <body> like this: <body class="metro">

并且还将class =“metro”添加到您的中：

Hope this will help.

希望这会有所帮助。

#2

Navbar dropdowns only work with files in the root folder. Only the css/js in the docs folder seems to work correctly. I have tried all other combinations and they do not workYou have to have all your files in the root folder or the navbar drop downs wont work.

Navbar下拉列表仅适用于根文件夹中的文件。只有docs文件夹中的css / js似乎正常工作。我已经尝试了所有其他组合，但它们不起作用您必须将所有文件放在根文件夹中，否则导航栏下拉列表将无法正常工作。

Non navbar dropdowns work anywhere.

非导航栏下拉列表可在任何地方使用。

Only the docs css/js versions work. The other versions do not

只有docs css / js版本有效。其他版本没有

UPDATE:

更新：

In load-metro.js you need to change the path from relative to absolute.

在load-metro.js中，您需要将路径从相对路径更改为绝对路径。

$(function(){
    if ((document.location.host.indexOf('.dev') > -1) || (document.location.host.indexOf('modernui') > -1) ) {
        $("<script/>").attr('src', '/docs/js/metro/metro-loader.js').appendTo($('head'));
    } else {
        $("<script/>").attr('src', '/docs/js/metro.min.js').appendTo($('head'));
    }
})

#3

From author:

来自作者：

metro.min.js includes all js metro components. Check your main container for class metro. If your build dropdown from ajax, set global variable METRO_AUTO_REINIT to true. See more here https://github.com/olton/Metro-UI-CSS/issues/574

metro.min.js包括所有js metro组件。检查主集装箱是否有地铁类。如果您从ajax创建构建下拉列表，请将全局变量METRO_AUTO_REINIT设置为true。在此处查看更多信息https://github.com/olton/Metro-UI-CSS/issues/574

I have added to header tag and it work.

我添加到标头标签，它的工作原理。

<script src="metroui/docs/js/load-metro.js"></script> <script>var METRO_AUTO_REINIT = true;</script>

#4

-1

Metro UI depends on jQuery, you should include jQuery first, then Metro UI.

Metro UI依赖于jQuery，你应该首先包含jQuery，然后是Metro UI。

<!-- Load JavaScript Libraries -->
<script src="metroui/docs/js/jquery/jquery.min.js"></script>
<script src="metroui/docs/js/jquery/jquery.widget.min.js"></script>
<script src="metroui/docs/js/jquery/jquery.mousewheel.js"></script>
<script src="metroui/js/metro-dropdown.js"></script>
<script src="dropdown.js"></script>
<script src="metroui/docs/js/prettify/prettify.js"></script>
<script src="metroui/docs/js/holder.js"></script>

#5

-1

Did you run it on server. Please put it into htdocs folder of the server like XAMPP or WAMP.

你在服务器上运行了吗？请把它放到服务器的htdocs文件夹中，如XAMPP或WAMP。

If you run it by "Double click" the links will be like

如果您通过“双击”运行它，链接就像

file:///C:/xampp/htdocs/Metro-UI-CSS-master/docs/navbar.html

If you run it on server the links will be like

如果你在服务器上运行它，链接就像

http://localhost/Metro-UI-CSS-master/docs/navbar.html

Whick corrected ways are you?

你纠正的方式是什么？

#1