在同一个 "button" 或引用上顺序调用 2 个方法

Question

button/reference 应该 minimize/maximize 一些文本在 table 中。

您将在下面找到 2 个函数 "blend_in"，它们最大化 table 中的文本，"blend_out" 混合/最小化 table 中的文本。我用 2 个按钮实现了这个，并希望在同一个 button/reference.

上使用这 2 个方法

function blend_in(id) {
  document.getElementById(id).style.display = 'block'
}

function blend_out(id) {
  document.getElementById(id).style.display = 'none'
}

<table width="100%">
  <tr>
    <td>
      //this button will open the text inside the table.
      <a href="javascript:blend_in('zeile')"> Button 1 </a>
    </td>
  </tr>
  <tr style="display:none;" id="zeile">
    <td>
      (Text of the table) //the text inside the table which will be opened by clicking "Button 1" and closes by clicking "Button 2"
      <a href="javascript:blend_out('zeile')"> Button 2 </a></td>
  </tr>
</table>

Answer 1

只是一个简单的切换 - 我使用数据属性来获取目标 - 它可以用于多行：

window.onload=function() {
  var buts = document.querySelectorAll(".toggleBut");
  for (var i=0;i<buts.length;i++) {
    buts[i].onclick=function(e) {
      e.preventDefault(); // cancel the click
      var target = document.getElementById(this.getAttribute("data-blend"));
      target.style.display=target.style.display=="none"?"":"none";
    }
  }
}

a.toggleBut { text-decoration:none }

<table width="100%">
  <tr>
    <td>
      <a href="#" class="toggleBut" data-blend="zeile1"> Toggle 1 </a>
    </td>
  </tr>
  <tr style="display:none;" id="zeile1">
    <td>Text of the table 1</td>
  </tr>
  <tr>
    <td>
      <a href="#" class="toggleBut" data-blend="zeile2"> Toggle 2 </a>
    </td>
  </tr>
  <tr style="display:none;" id="zeile2">
    <td>Text of the table 2</td>
  </tr>
</table>

在同一个 "button" 或引用上顺序调用 2 个方法

Call 2 methods sequentially on the same "button" or reference

html

button

html-table

jscript