jquery show hide使用選擇框/下拉菜單隱藏問題

Question

我在div裏面有一個單詞。這是一個下降的部分下降，但下拉是隱藏的，具體的重點是「DC」現在...下面的圖片在看銷售：

HTML：

<td class="edit"> 
<select class="touch" style="display: none;"> 
<option value="11">Rebuying</option><option value="12">Sales</option></select> 
<span class="look">DC</span> 
</td> 

單擊「DC」一詞後，出現下拉選擇。注意，課程從編輯變爲編輯。

<td class="editing" data-oldvalue="13"> 
<select class="touch" style="display: inline-block;"> 
<option value="11">Rebuying</option><option value="12">Sales</option></select> 
<span class="look" style="display: none;">DC</span> 
</td> 

這裏是我的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（）。

現在，當我點擊文本時，它會觸發下拉和日期選擇器隨機彈出。

<td class="edit"> 
         <input type="text" class="touch dtpick"> 
         </input> 
         <span class="look"> 
          <?php echo $project->get_est_date(); ?> 
         </span> 
        </td> 
        <td class="edit"> 
         <input type="text" class="touch dtpick"> 
         </input> 
         <span class="look"> 
          <?php echo $project->get_due_date(); ?> 
         </span> 
        </td> 
        <td class="edit"> 
         <input type="text" class="touch dtpick"> 
         </input> 
         <span class="look"> 
          <?php echo $project->get_next_date(); ?> 
         </span> 
        </td> 

由於dtpick類正在觸摸以及它有點古怪。確認！

Answer 1

因爲它是一個<select>元素，.focusout()會做得很好。

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

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

---

如果它發射多個元素與同一個班級，你只需要一個更好的選擇。我注意到每個<td>都有一套'.look'和'.touch'。您只能使用.siblings()在同一父代<td>上查找元素。

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

我已經更新了fiddle以及