Question

我有一个菜单，其中某些li隐藏了。我有一张桌子，我想当我单击菜单中的li隐藏的每个tr时都显示出来，而当我单击桌子的外面时，菜单的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

当click上的table和hide上的click菜单都window时使用e.stopPropagation();：

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

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

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

3 个答案: