javascript - jQuery - 双击类显示下拉选择

Question

我在这方面遇到了很大的麻烦。

我正在尝试在 jQuery 中编写一些东西，当双击文本时，它会隐藏该元素并显示一个选择下拉菜单......但是，当用户离开该元素时，下拉菜单应该返回到原始文本。

我尝试了很多方法，都没有奏效。我尝试将 dblclick 与悬停等一起使用。

简要回顾一下，用户单击带有文本的 div。div is hidden 显示选择。用户鼠标离开区域，下拉隐藏，div再次显示。

感谢您的帮助，我已经玩了太多小时了！

Answer 1

像这样的东西对你不起作用？

HTML：

​<div>
    <span>TEXT TEXT TEXT</span>
    <select>
        <option>1</option>
        <option>2</option>
    </select>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS：

span {
    cursor: default;
}

select {
    display: none;
}​

JS：

$('div').dblclick(function() {
    $('span').hide();
    $('select').show();
}).mouseleave(function() {
    $('span').show();
    $('select').hide();
});​

替代JS：

$('div').dblclick(function() {
    $('span').hide();
    $('select').show();
});
$('select').mouseleave(function() {
    $('span').show();
    $('select').hide();
});​

当您移出 div 的边界（由隐藏的 span 文本的大小设置）时，第一个 JS 将使选择框消失。第二个将使选择框在您将鼠标移入内部然后鼠标移出后消失。如果您愿意，您可以将其从 .mouseleave() 更改为 .change() ，然后它只会在有人实际选择某些内容时隐藏选择框。

JSFiddle