使用按钮 Onclick 切换功能

Question

我创建了一个 table，它具有两种切换功能，第一个切换是切换 table 行及其特定 ID，第二个切换是切换所有 table 行。但是，如果我单击第一个 parent 行的第一个开关，然后当我单击第二个开关时，第一个 parent 的 child 将隐藏， 它假设的位置跟随其他 parent 显示他们的 child 然后再次单击以隐藏 child。 如果显示所有 child，图像也应该从 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 切换功能

Toggle Function with Button Onclick

html

javascript

toggle