语义UI中的下拉列表不适用于移动设备

时间:2018-07-04 21:53:28

标签: semantic-ui

我遇到的问题仅出现在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>

2 个答案:

答案 0 :(得分:0)

这实际上是在语义UI中已确认的问题。

https://github.com/Semantic-Org/Semantic-UI/issues/6465

答案 1 :(得分:0)

您需要初始化下拉菜单。 $('。ui.dropdown')。dropdown();