在div中隐藏表格用作下拉列表

Question

我使用div和表格开发了多列下拉列表。

如何隐藏下拉列表上的HTML机构或任何其他control.Any建议点击时

<input type="text" id="mulitcolumn"> 
<div id="myDropdownGrid" class="dropdownGrid" style="overflow:hidden;overflow-y:auto; max-height: 400px;border-right:1px solid rgb(51, 102, 153)"> 
        <table class="grid">      
         @foreach (var item in (IEnumerable<SelectListItem>)ViewBag.List) 
         { 
         <tr> 
          <td style="display:none">@item.Value</td> 
          <td>@(item.Text.Substring(1, item.Text.IndexOf(']') - 1))</td> 
          <td>@(item.Text.Substring(item.Text.IndexOf("] - ") + 3, item.Text.Length - (item.Text.IndexOf("] - ") + 3)))</td> 
         </tr> 
         } 
        </table> 
       </div> 

$('#myDropdownGrid table tr').click(function() 
    { 
     var tableData = $(this).children("td").map(function() { 
      return $(this).text(); 
     }).get(); 

     $('#myDropdownGrid table').toggle(); 
    }); 

Answer 1

尝试：

$('.dropdownGrid').on('click',function() { 
       $(this).addClass('activ'); 
$(this).find('.grid').show(); 
      }); 
      $('body').click(function(evt){ 
       console.log(evt.target) 
        if(evt.target.class == "activ" || $(evt.target).closest('.activ').length) { 
         return; } 
       else { 
        $(this).removeClass('activ'); 
         $(this).find('.grid').hide() 

       } 

      });