Question

我想使用语义UI构建带有下拉菜单的菜单。

它在桌面上效果很好，因为它似乎是基于悬停的。

但是，在移动设备上，由于没有悬停，所以我无法将其放下。

如何使它基于单击而不仅仅是悬停？

<!DOCTYPE html>
<html>
<head>
<title>Puzzles</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=yes">
<link rel="stylesheet" type="text/css" href="CSS.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
</head>

<body>
<div class="ui menu">
<div class="header item"><a href="https://www.myPuzzleSite.com">Puzzles</a></div>
<div class="right menu">
        <div class="ui simple dropdown item">
            <div class="text">Unsolved Puzzles</div>
            <i class="dropdown icon"></i>
            <div class="menu">
                <div class="item"><a href="https://www.google.com">Puzzle 1</a></div>
                <div class="item"><a href="https://www.google.com">Puzzle 2</a></div>
                <div class="item"><a href="https://www.google.com">Puzzle 3</a></div>
            </div>
        </div>  
</div>
</div>

</body>
</html>

Answer 1

您需要使用$('.ui.dropdown').dropdown();

初始化下拉菜单

提琴：https://jsfiddle.net/L63u25ja/

如何使SemanticUI下拉菜单在没有悬停的情况下工作（在移动设备上）？

1 个答案: