悬停下拉菜单的语义化UI实现

Question

我希望我的Semantic 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>

- ryr11

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

- Felix

---

谢谢，但有没有办法保持过渡效果？ - ryr11

如果我不使用简单模式，当我点击它时，它会以过渡方式下拉。我需要一种方法，在悬停时以过渡方式使其下拉。 - ryr11

我认为SemUI目前不支持这个功能，或者我可能遗漏了什么。很抱歉要这么说... :/ - Felix

Answer 2

这和上面的答案是一样的，只是更加简洁。

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

- Chris Allen

Answer 3

你可以参考以下代码，这个代码和我用的一样：

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

- 再见田园犬

Answer 4

我使用这个：

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

它运行良好。在您的情况下，请尝试选择下拉项的父级。

- dartheize