jQuery显示隐藏元素，当我在文本上单击dblclick时，我的可编辑下拉列表出现

但是，如果我改变主意，不想编辑下拉列表，它只会停留在编辑模式下。我关不上。我试图让它消失，每当我点击页面上的任何其他地方

我真的不想让它滑动思考，现在它只是在双击文本时出现在文本的位置。我只是希望它像下面的jsfiddle一样消失

类似于此：

这是我的密码：

简单html下拉列表选择：

<td class="edit">
<select class="touch" style="display: none;">
<option value="13">opers</option>
<option value="1">Customer Service</option>
<option value="2">DC</option>
<option value="3">Ecommerce</option>
<option value="4">Finance/Accounting</option>
<option value="5">Human Resources</option>
<option value="6">Inbound Logistics</option>
<option value="7">Information Systems</option>
<option value="14">Management</option>
<option value="8">Marketing</option>
<option value="9">Merchandising</option>
<option value="10">Property</option>
<option value="11">Rebuying</option>
<option value="12">Sales</option>
</select>
<span class="look">DC</span>
</td>

<td class="editing" data-oldvalue="13">
<select class="touch" style="display: inline-block;">
<option value="13">opers</option>
<option value="1">Customer Service</option>
<option value="2" selected="selected">DC</option>
<option value="3">Ecommerce</option>
<option value="4">Finance/Accounting</option>
<option value="5">Human Resources</option>
<option value="6">Inbound Logistics</option>
<option value="7">Information Systems</option>
<option value="14">Management</option>
<option value="8">Marketing</option>
<option value="9">Merchandising</option>
<option value="10">Property</option>
<option value="11">Rebuying</option>
<option value="12">Sales</option>
</select>
<span class="look" style="display: none;">DC</span>
</td>

---

任何帮助都将不胜感激。

我不明白，你的提琴操作方式有什么问题？你问的不清楚，你能不能再解释一下你的问题确定一点，提琴不是问题，在我的代码中，提琴工作得很好。我有一个名为“edit”的table类，里面有一个单词。。双击后，它将成为一个可编辑的下拉表类“编辑”。如果我决定不忽略它，我希望它能通过点击页面上的任何地方来摆脱它。。类似于我发布的JSFIDLE。但我的不是那样的。请记住，JSFIDLE与我的代码不同。我当然希望这更有意义。仍然在寻找一些帮助，请让我知道，如果我可以帮助解释任何进一步。提前谢谢。

function back_to_look() {
    $('td.editing ,td.edit.new').each(function() {
        $(this).children('.look').show();
        $(this).children('.touch').hide();
        if (!$(this).hasClass('edit')) {
            $(this).addClass('edit');
        }
        if ($(this).hasClass('editing')) {
            $(this).removeClass('editing');
        }
    });
}

function td_to_touch(td) {
    var theTouch = td.children('.touch');
    var theLook = td.children('.look');
    var oldVal = theLook.text().trim();

    td.addClass('editing');
    td.removeClass('edit');
    theLook.hide();
    theTouch.show();

    //save the existing value so it can be compared to when the "change" event is fired on the element
    td.attr('data-oldvalue', theTouch.val());

    if (theTouch.is('select')) {        
        theTouch.children('option:contains(' + oldVal + ')').attr('selected', 'selected');
    } else {
        theTouch.val(oldVal);
    }
}


$('td.edit' + suffix).dblclick(function(event) {
        //make this the only TD in "editing" mode
        event.preventDefault();
        back_to_look();        
        td_to_touch($(this));
    });




String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g, '');};

var myTextExtraction = function(node)  
{
    var elem = $(node);
    var theVal = null;

    if (elem.hasClass('edit')) {
        elem.children().each(function() {
            if ($(this).css('display') != 'none') {
                theVal = $(this).val();
            }
        });

    } else {
        theVal = elem.text();
    }

    console.log(theVal);

/*
    var c = node.childNodes.length;

    if (c == 1) {
        theVal = node.innerHTML.trim();
    } else if (c == 5) {
        theVal = node.childNodes[3].innerHTML.trim();
    }

    //console.log(theVal);
    return theVal;
*/
}