Javascript 如何在单击表格外侧时隐藏菜单

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

上传



名称
大小
word2016
574KB
电力2016
574KB
.hide{display:none；}
.show{display:block}
$（文档）.ready（函数（）{
$（“.my table tbody>tr”）。单击（函数（e）{
//如果（例如，目标！==此）{
//$（“.menu-header2.itemMenu”）.removeClass（“show”）.addClass（“hide”）；
// }
var项目=$（此项）；
item.addClass（“selected2”）；
$（“.menu-header2.itemMenu”）.removeClass（“隐藏”）.addClass（“显示”）；
$（“.my table tbody>tr”）.not（item）.removeClass（“selected2”）；
});
});

当

单击
表上的
和
单击
所有
窗口上的
隐藏
菜单时使用：


$（文档）.ready（函数（）{
$（“.my table”）。单击（函数（e）{
如果（$（“.menu-header2”）.length>0）
$（“.menu-header2”）.show（）；
e、 停止传播（）；
});
$（窗口）。单击（函数（）{
$（“.menu-header2”）.hide（）；
});
});


上传



名称
大小
word2016
574KB
电力2016
574KB
当
单击
表上的
和
单击
所有
窗口上的
隐藏
菜单时使用：


$（文档）.ready（函数（）{
$（“.my table”）。单击（函数（e）{
如果（$（“.menu-header2”）.length>0）
$（“.menu-header2”）.show（）；
e、 停止传播（）；
});
$（窗口）。单击（函数（）{
$（“.menu-header2”）.hide（）；
});
});


上传



名称
大小
word2016
574KB
电力2016
574KB
使用
$（文档）.ready（函数（）{
$（“.my table tbody>tr”）。单击（函数（e）{
//如果（例如，目标！==此）{
//$（“.menu-header2.itemMenu”）.removeClass（“show”）.addClass（“hide”）；
// }
var项目=$（此项）；
item.addClass（“selected2”）；
$（“.menu-header2.itemMenu”）.removeClass（“隐藏”）.addClass（“显示”）；
$（“.my table tbody>tr”）.not（item）.removeClass（“selected2”）；
});
$（'.my table'）。单击（函数（e）{
$（'.menu-header2'）.show（）；
e、 停止传播（）；
});
$（窗口）。单击（函数（）{
$（'.menu-header2'）.hide（）；
});
});

某物某物某物某物

上传



名称
大小
word2016
574KB
电力2016
574KB
某物某物…………某物。。。。。。。。。。。。。某物
使用
$（文档）.ready（函数（）{
$（“.my table tbody>tr”）。单击（函数（e）{
//如果（例如，目标！==此）{
//$（“.menu-header2.itemMenu”）.removeClass（“show”）.addClass（“hide”）；
// }
var项目=$（此项）；
item.addClass（“selected2”）；
$（“.menu-header2.itemMenu”）.removeClass（“隐藏”）.addClass（“显示”）；
$（“.my table tbody>tr”）.not（item）.removeClass（“selected2”）；
});
$（'.my table'）。单击（函数（e）{
$（'.menu-header2'）.show（）；
e、 停止传播（）；
});
$（窗口）。单击（函数（）{
$（'.menu-header2'）.hide（）；
});
});

某物某物某物某物

上传



名称
大小
word2016
574KB
电力2016
574KB
某物某物…………某物。。。。。。。。。。。。。某物
当您在tr中单击时，当您在tr外单击时，所有li都将隐藏，li将显示。好啊
因此，您需要以下代码：



名称
大小
word2016
574KB
电力2016
574KB
    <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>