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

Question

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

如何在点击html正文或任何其他控件时隐藏下拉列表。任何建议

<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()

                }

            });