jQuery - 双击类显示下拉列表进行选择

Question

我遇到了很大的麻烦。

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

我尝试了很多方法，但没有一种有效。我尝试使用带有悬停等的dblclick。

在简短的回顾中，用户单击带有文本的div。显示div 是隐藏的选择。用户鼠标离开区域，下拉列表隐藏，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 的边界之外（由隐藏的跨度文本的大小设置）时，第一个 JS 将使选择框消失。第二个将使您在鼠标进入内部然后鼠标退出后，选择框将消失。如果您愿意，可以将其从 .mouseleave（） 更改为 .change（），然后它只会在有人实际选择某些内容时隐藏选择框。

JSFiddle