如果我在桌子旁边单击，如何隐藏菜单

Question

我有一个菜单，其中某些li隐藏了。我有一张桌子，我想当我单击菜单中的li隐藏的每个tr时都显示出来，而当我单击表的一侧时，菜单的li变成了显示hide。但是当我单击表的一侧并在javasscript中为其注释相关部分时，我的代码无法正常工作。菜单不会变为hide。

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(); 当click table并hide菜单时， click所有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> 

Answer 2

使用event.stopPropagation（）

 $(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"); }); $('.my-table').click(function(e) { $('.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> SOmething............. SOmething............. SOmething............. SOmething............. <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> SOmething............. SOmething.............SOmething............. SOmething............. </div> 

Answer 3

您希望在单击tr时显示所有li时隐藏所有li。 好？ 所以你想要这个代码：

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

 var item = document.getElementById("i1"); var item2 = document.getElementById("i2"); function hide() { item.style.visibility = "hidden"; item2.style.visibility = "hidden"; } function show() { item.style.visibility = "visible"; item2.style.visibility = "visible"; } 

 <div class="menu-header2"> <ul> <li>upload</li> <li class="itemMenu hide" id="i1"><a href="#">download</a></li> <li class="itemMenu hide" id="i2"><a href="#" >delete</a></li> </ul> </div> <table class="table my-table"> <thead> <tr onclick="hide()"> <th>name</th> <th>size</th> </tr> </thead> <tbody> <tr onclick="hide()"> <td>word2016</td> <td>574 KB</td> </tr> <tr> <td onclick="show()">power2016</td> <td onclick="show()">574 KB</td> </tr> </tbody> </table> 

如果单击名称，大小或word2016或574KB，则下载和删除被隐藏，但是如果单击powe2016或其他574 KB，则显示删除和下载。 请阅读函数hide（）和函数show（）