javascript - 悬停时的语义 Ui 下拉菜单

Question

我希望我的语义 ui 下拉菜单在悬停而不是单击时触发，它适用于单击，但不能悬停。

Javascript：

$('.ui.dropdown').dropdown({on:'hover'});

HTML：

<div class="ui dropdown item">
    <i class="fa fa-users"></i> Members <i class="fa fa-caret-down"></i>
    <div class="menu">
        <a class="item"><i class="fa fa-users"></i> Players</a>
        <a class="item"><i class="fa fa-user-md"></i> Staff</a>
    </div>
</div>

Answer 1

如果您希望悬停效果打开下拉菜单，那么您不需要使用 javascript，而是可以将类添加simple到您的父级div：

<div class="ui simple dropdown item">
    <i class="fa fa-users"></i> Members <i class="fa fa-caret-down"></i>
    <div class="menu">
        <a class="item"><i class="fa fa-users"></i> Players</a>
        <a class="item"><i class="fa fa-user-md"></i> Staff</a>
    </div>
</div>

小提琴演示

Answer 2

这与上面的答案相同，只是更清洁。

$('.dropdown').dropdown({transition: 'drop', on: 'hover' });

Answer 3

你可以拿这个，它对我有用 $('.dropdown').dropdown({transition: 'drop' }).dropdown({ on: 'hover' });

Answer 4

我用这个：

$('.menu > .ui.dropdown').dropdown({
    on: 'hover'
});

而且效果很好。在您的情况下，尝试选择下拉项的父项。