Question

我用两种切换功能方法创建了一个表，第一个切换是具有特定ID的切换表行，第二个切换是切换所有表行。但是，如果我单击第一个父级上的第一个切换，然后单击第二个切换时，第一个父级的子级将隐藏，该位置假定其他父级显示其子级，然后再次单击以隐藏该子级。如果显示了所有子项，则图像也应从details_open.png变为details_close.png

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="w3.css" rel="stylesheet" />

  <body>

    <body>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script>
        function toggle(thisname, image) {
          var path = image.src;
          var filename = path.match(/.*\/([^/]+)\.([^?]+)/i)[1];
          if (filename == 'details_open') {
            image.src = 'details_close.png';
          }
          if (filename == 'details_close') {
            image.src = 'details_open.png';
          }
          tr = document.getElementsByTagName('tr')
          for (i = 0; i < tr.length; i++) {
            if (tr[i].getAttribute(thisname)) {
              if (tr[i].style.display == 'none') {
                tr[i].style.display = '';
              } else {
                tr[i].style.display = 'none';
              }
            }
          }
        }



        $(function() {
          $('#btn').click(function(e) {
            e.preventDefault();
            $('.td1').toggle();
          });
        });
      </script>

      <input type="button" id="btn" style="color:red" name=btn value="Toggle Child Accessories">
      <table class="w3-table-all">
        <thead>
          <tr>
            <td onclick="toggle(1,open_1);">
              <center><img id="open_1" src="details_open.png" style="width:20px;cursor: pointer;"></center>
            </td>
            <td> A </td>
            <td> B </td>
          </tr>
        </thead>

        <thead>
          <tr 1=fred style='display:none;' class='td1' id='td1'>
            <td> </td>
            <td> C </td>
            <td> D </td>
          </tr>
        </thead>

        <thead>
          <tr>
            <td onclick="toggle(2,open_2);">
              <center><img id="open_2" src="details_open.png" style="width:20px;cursor: pointer;"></center>
            </td>
            <td> E </td>
            <td> F</td>
          </tr>
        </thead>

        <thead>
          <tr 2=fred style='display:none;' class='td1' id='td1'>
            <td> </td>
            <td> G </td>
            <td> H </td>
          </tr>
        </thead>
      </table>
    </body>

</html>

Answer 1

如果我正确理解了您的需求，则只需要控制行的可见性即可强制切换以其参数显示http://api.jquery.com/toggle/#toggle-display隐藏或显示所有内容

$('#btn').click(function(e) {
    e.preventDefault();

    var display = true;

    if ($('.td1:visible').length == $('.td1').length) {
        display = false;
    }

    $('.td1').toggle(display);
});

https://codepen.io/anon/pen/xJymRr?editors=1010

希望这对您有帮助

Answer 2

由于使用的是jQuery，因此可以使用jquery toggleClass()使用CSS类交换图像。 jquery toggleClass。还注意到您有两个<body>标签

使用按钮Onclick切换功能

2 个答案: