如果我在桌子旁邊單擊，如何隱藏菜單

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