javascript - 开关 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>

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

我需要 onclick 切换，但将 Open 更改为 Close 并反向。

最好保留链接的位置。因此，链接外部的 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>