hide table in div used as dropdown

Question

I have developed multi column dropdown using div and table.

How to hide dropdown when click on html body or any other control.Any suggestions

<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

Try:

  $('.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()

                }

            });