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>

<强> Fiddle Demo

Answer 2

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

Answer 3

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

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

Answer 4

我用这个：

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

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

悬停时的语义Ui下拉列表

4 个答案: