悬停时触发单击选择框 [英] Trigger click on select box on hover

问题描述

我试图让 select 框在用户悬停在它上面时自动弹出打开，就好像他们点击了它一样.这可能吗?

I'm trying to have a select box automatically pop open when the use hovers over it, as if they had clicked it. Is this possible?

我想我可以用 jQuery 轻松做到这一点...

I would think I could do this easily with jQuery...

$("#settings-select").mouseover(
    function(){
        $(this).trigger("click");
    }
);

但这无济于事.有什么想法吗?

But that does nothing. Any ideas?

推荐答案

我终于搞定了！你需要选择；正如其他人指出的那样，您不能使用普通的 select 执行此操作，因为没有可用的事件.但这会在您将鼠标悬停在 select 上时弹出菜单，并在鼠标移出时将其关闭，这正是我想要的效果.

I finally got this to work! You need Chosen; as others have pointed out, you can't do this with a normal select because there are no events available to use. But this will pop open the menu when you mouseover the select and close it when you mouseout, which is the exact effect I wanted.

HTML:

<select id="dropdown" data-placeholder="Choose&hellip;">
    <option value="one">Option 1</option>
    <option value="two">Option 2</option>
    <option value="three">Option 3</option>
</select>

JS:

$("#dropdown").chosen().next(".chzn-container").hover(
    function(){
        $("#dropdown").trigger("liszt:open");
    },
    function(){
        $(this).trigger("click");
    }
);

$("#dropdown").trigger("liszt:open"); 是打开菜单的内容.当您想要关闭它时，没有等效的 liszt:close 事件可以触发(据我所知)，但触发 click 却具有相同的效果.

$("#dropdown").trigger("liszt:open"); is what opens the menu. There is no equivalent liszt:close event to trigger when you want to close it (as far as I know), but triggering a click on it instead has the same effect.

这篇关于悬停时触发单击选择框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！