切换onclick事件onclick

Question

我有一个函数，用来打开/关闭一个div，使用超链接的占位符。

<a class="button" onclick="show('click-drop')">Open</a>

然后，onclick事件打开div。

我有这个onclick来关闭它：

<a class="button" onclick="hide('click-drop')">Close</a>

我想做的是为在两个onclick事件之间切换的超链接创建一个单独的占位符。因此，onclick=show将切换到onclick=hide，反之亦然。

我到处找遍了，找不到一个直接的办法来解决我的处境。

修订问题

这是我具体的工作内容。

function show(target) {
    document.getElementById(target).style.height = '300px';
}
function hide(target) {
    document.getElementById(target).style.height = '0px';
}

<a class="button" onclick="show('click-drop')">Open</a>
<div id="click-drop" style="height:0px">
    <a class="button" onclick="hide('click-drop')">Close</a>
</div>

单击Open，它将打开/展开内联高度样式。单击Close，它就会关闭。

我需要让onclick Open 切换，但是Open将改为 Close 和reverse.。

保持链接的位置将是理想的。因此，链接外的Open链接是隐藏的，直到单击div中的Close链接。

我很感谢你的反馈。

Answer 1

您可以动态地更改按钮的onclick事件，但是使用HTML来描述功能已经够尴尬了。如果您将所有功能保留在JavaScript中，这将对您更有好处。就像这样：

​

var button = document.getElementById("button");
var target = document.getElementById("target");

button.innerHTML = "Close";
button.onclick = function() { hide(target); };

function hide(target) {
  console.log("hiding");
  target.style.display = "none";
  console.log(target);
  button.innerHTML = "Open";
  button.onclick = function() { show(target); };
}

function show(target) {
  target.style.display = "block";
  button.innerHTML = "Close";
  button.onclick = function() { hide(target); };
}

<button id="button">Close</button>
<div id="target">Hello World!</div>

​

Answer 2

这是另一个答案，以防您想要在多个按钮上使用toggle。该解决方案使用按钮来存储其目标的状态，因此它使用toggle.call()在toggle中修改this的值。

它受到jQuery.toggle()和Yuriy Yakym的回答的启发。

​

for (i = 1; i <= 3; i++) {
  var button = document.getElementById("button"+i),
      target = document.getElementById("target"+i);
  // wrapped in closure because https://stackoverflow.com/q/8909652/5743988
  (function(_button, _target) {
    _button.onclick = function() {
      toggle.call(_button, _target);
    }
  })(button, target);
}

function toggle(target) {
  this.func = this.func || hide; // if "func" is undefined, assign "hide"
  this.func.call(target); // execute "func"
  this.func = this.func === hide // make "func" call the other thing next time
    ? (this.innerHTML = "Show", show) : (this.innerHTML = "Hide", hide);
}

function hide() {
  this.oldDisplay = window.getComputedStyle(this).display;
  this.style.display = "none"; // better than "height = 0px"
}

function show() {
  this.oldDisplay = this.oldDisplay || "block";
  this.style.display = this.oldDisplay;
}

button, div {
  display: inline-block;
}

<button id="button1">Close</button>
<div id="target1">Hello World!</div>
<br>
<button id="button2">Close</button>
<div id="target2">Hello Again World!</div>
<br>
<button id="button3">Close</button>
<div id="target3">Hello Again Again World!</div>

​

Answer 3

可以将按钮的状态保存在其上下文中。然后，根据其状态调用适当的函数。

​

function toggle() {
    this.state = !this.state; // false - open; true - closed; default = false (because is not initialized yet)
    this.innerHTML = this.state ? 'Close' : 'Open';
    
    if(this.state) {
        open();
    } else {
        close();
    }
}

function open() {
    alert("Opened");
}

function close() {
    alert("Closed");
}

<a class="button" onclick="toggle.call(this)">Open</a>
<a class="button" onclick="toggle.call(this)">Open</a>
<a class="button" onclick="toggle.call(this)">Open</a>

​