jquery show使用选择框/下拉列表隐藏问题

我在div里面有一个词。 这是下拉的一部分，但是下拉是隐藏的，特别关注的是现在的“DC”…在下面的图片中看着销售情况：

HTML：

  RebuyingSales DC  

单击“DC”后，会出现一个下拉选择。 请注意，类已从编辑更改为编辑。

   RebuyingSales DC  

这是我的show() hide()函数：

 //allow flipping between "look" and "touch" mode for all editable fields $('td.edit' + suffix).click(function(event) { //make this the only TD in "editing" mode event.preventDefault(); back_to_look(); td_to_touch($(this)); }); var mouse_is_inside = false; $(document).ready(function() { $('td.edit').hover(function(){ mouse_is_inside=true; }, function(){ mouse_is_inside=false; }); $("body").click(function(){ if(! mouse_is_inside) $('.touch').hide(); back_to_look(); }); }); 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); } } 

第一部分工作正常，当我点击“DC”这个词时，下拉出现……当我点击外面的div回到它隐藏的身体。 这工作得相当不错，问题是当下拉选择框显示并且我点击它进行选择时它会消失，然后我可以选择因为我正在使用mouseup()函数。

我需要人们能够做出选择，然后当他们点击div之外时它会消失。

我尝试过使用.live，on（click，function（））以及几乎所有内容。 如有任何帮助将不胜感激。 谢谢。

大纲：下拉列表不会保持打开状态，因此我可以选择，因为我正在使用mouseup（）。

现在，当我点击文本时，它会同时触发下拉和日期选择器随机弹出。

      get_est_date(); ?>       get_due_date(); ?>       get_next_date(); ?>   

它有点古怪，因为dtpick类也是触摸式的。 确认！

Answer 1

由于它是元素， .focusout()会很好。

 $('.look').click(function(){ $(this).hide(); $('.touch').show().focus(); }); $('.touch').focusout(function(){ $(this).hide(); $('.look').show(); }); 

---

如果它使用相同的类触发多个元素，则只需要一个更好的选择器。 我注意到每个

都有'.look'和'.touch' 。 您可以使用.siblings()仅在同一父

上查找元素。

 $('.look').click(function(){ $(this).hide(); $(this).siblings('.touch').show().focus().focusout(function(){ $(this).hide(); $(this).siblings('.look').show(); }); }); 

我也更新了小提琴