javascript - 如果我在表格外单击，如何隐藏菜单

Question

我有一个菜单，它的一些 li 是隐藏的。我有一个表，我希望当我点击每个 tr 时，菜单的 li 被隐藏变成显示，当我点击表的外面时，菜单的 li 是显示的是隐藏的。但是当我点击表格的一侧并在 javasscript 中为其评论相关部分时，我的代码无法正常工作。菜单不会隐藏。

https://codepen.io/anon/pen/mGJKvY

    <div class="menu-header2">
        <ul>
            <li>upload</li>
            <li class="itemMenu hide"><a href="#">download</a></li>
            <li class="itemMenu hide"><a href="#" >delete</a></li>
        </ul>
        </div>
        <table class="table my-table">
            <thead>
                <tr>
                    <th>name</th>
                    <th>size</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>word2016</td>
                    <td>574 KB</td>
                </tr>
                <tr>
                    <td>power2016</td>
                    <td>574 KB</td>
                </tr>
            </tbody>
        </table>
         <style>
         .hide{ display:none;}
         .show{display:block}
        </style>  
  <script>
            $(document).ready(function () {
                $(".my-table  tbody > tr").click(function (e) {
                   //if (e.target !== this) {
                    //    $(".menu-header2 .itemMenu").removeClass("show").addClass("hide");
                   // }
                    var item = $(this);
                    item.addClass("selected2");
                    $(".menu-header2 .itemMenu").removeClass("hide").addClass("show");
                    $(".my-table  tbody > tr").not(item).removeClass("selected2");

                });
            });
        </script>

Answer 1

使用e.stopPropagation();当单击 table 和hide 菜单时，click all window:

$(document).ready(function () {
  $(".my-table").click(function (e) {
   if($(".menu-header2").length>0)
      $(".menu-header2").show();
      e.stopPropagation();
   });
   $(window).click(function() {
     $(".menu-header2").hide();
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-header2">
        <ul>
            <li>upload</li>
            <li class="itemMenu hide"><a href="#">download</a></li>
            <li class="itemMenu hide"><a href="#" >delete</a></li>
        </ul>
</div>
        <table class="table my-table">
            <thead>
                <tr>
                    <th>name</th>
                    <th>size</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>word2016</td>
                    <td>574 KB</td>
                </tr>
                <tr>
                    <td>power2016</td>
                    <td>574 KB</td>
                </tr>
            </tbody>
        </table>

  <script>

        </script>