how to hide menu if I click out side of my table

Question

I have menu that some of its li is hide.I have a table and I want when I click on every tr that li of menu was hide are become show and when I click out side of table ,the li of menu are shown are become hide.but my code do not work correctly when I click out side of my table and I comment relevant section for it in javasscript .the menu donot become 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

Use e.stopPropagation(); when click on table and hide menu on click the 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> 

Answer 2

Use 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

You want when you click in the tr all li are hide when you clikc outside of tr the li are show. ok? so you want this codes:

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

If you click on the namr or size or word2016 or 574KB the download and the delete is hide but if you click on the powe2016 or othe 574 KB the delete and download are show. please read the function hide() and function show()