我遇到的问题仅出现在Mobile中。请注意,我也在使用简单的下拉菜单。
我查看了与此相关的所有线程,但无法弄清菜单为何不起作用。
查看代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Semantic-UI Issue</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.css" />
</head>
<body>
<div class="ui fixed inverted menu">
<div class="ui container">
<a href="https://reactgirl.github.io/portifolio/index.html" class="item">Home</a>
<div class="ui simple dropdown item">
Menu <i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="https://reactgirl.github.io/portifolio/about.html">About me</a>
<div class="divider"></div>
<a class="item" href="https://github.com/ReactGirl/portifolio/blob/master/about.html">This Code</a>
<a class="item" href="https://github.com/Semantic-Org/Semantic-UI/issues/6465">Semantic UI issue</a>
</div>
</div>
</div>
</div>
<div style='padding: 100px 0 0 30px'>
<div>Example page to show a semantic UI issue with the dropdown on mobiles: The dropdown does not open!</div>
<div class="ui padded segment">From the docs: "A simple dropdown can open <a href="https://semantic-ui.com/modules/dropdown.html">without Javascript."</a></div>
<div><strong>The menu dropdown issue was reproduced on the following Mobiles:</strong></div>
<li>iPhone X. Browsers: Safari, Chrome.</li>
<li>iPhone 6. Browsers: Safari, Chrome.</li>
<div class="ui divider"></div>
References:
<div>
<a href="https://github.com/Semantic-Org/Semantic-UI/issues/6465">Semantic UI GitHub issue</a>
</div>
</div>
</body>
</html>
答案 0 :(得分:0)
这实际上是在语义UI中已确认的问题。
答案 1 :(得分:0)
您需要初始化下拉菜单。 $('。ui.dropdown')。dropdown();