Javascript 开关onclick事件onclick

我编写了一个函数，用于使用超链接的占位符打开/关闭div

<a class="button" onclick="show('click-drop')">Open</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>

功能显示（目标）{
document.getElementById（target.style.height='300px'；
}
函数隐藏（目标）{
document.getElementById（target.style.height='0px'；
}
打开
接近

单击“打开”，它将打开/展开内联高度样式。单击

关闭

，它将关闭

我需要有

onclick

切换，但是

Open

切换到

Close

并反转。

这将是理想的保持链接的位置。因此，链接外部的

Open

链接被隐藏，直到单击div中的

Close

链接

---

非常感谢您的反馈。

您可以动态更改按钮的

onclick

事件，但使用HTML描述功能已经够尴尬的了。如果您将所有功能都保留在JavaScript中，那么它会对您有更好的帮助。大概是这样的：

var-button=document.getElementById（“按钮”）；
var target=document.getElementById（“目标”）；
button.innerHTML=“关闭”；
button.onclick=function（）{hide（target）；}；
函数隐藏（目标）{
控制台日志（“隐藏”）；
target.style.display=“无”；
控制台日志（目标）；
button.innerHTML=“打开”；
button.onclick=function（）{show（target）；}；
}
功能表演（目标）{
target.style.display=“block”；
button.innerHTML=“关闭”；
button.onclick=function（）{hide（target）；}；
}

关闭
你好，世界

您可以动态更改按钮的

onclick

事件，但使用HTML描述功能已经够麻烦的了。如果您将所有功能都保留在JavaScript中，那么它会对您有更好的帮助。大概是这样的：

var-button=document.getElementById（“按钮”）；
var target=document.getElementById（“目标”）；
button.innerHTML=“关闭”；
button.onclick=function（）{hide（target）；}；
函数隐藏（目标）{
控制台日志（“隐藏”）；
target.style.display=“无”；
控制台日志（目标）；
button.innerHTML=“打开”；
button.onclick=function（）{show（target）；}；
}
功能表演（目标）{
target.style.display=“block”；
button.innerHTML=“关闭”；
button.onclick=function（）{hide（target）；}；
}

关闭
你好，世界或方法应该为您提供技巧

根据请求编辑一个示例：

假设您有一个CSS类，基于OP，如下所示：

.info-box { 
    height: 300px;
}

通过使用
$（'#myTarget'）.toggleClass（'info-box'）
，您将删除或添加该类。如果你没有它，你会添加它。如果你有它，你会把它移除。就这样

因此，我刚才提供的一个工作示例就在这里，它自己实现了
toggle（）
，而不需要添加任何类，我相信这仍然实现了OP所寻求的解决方案


希望有帮助
 或方法应该为您提供技巧

根据请求编辑一个示例：

假设您有一个CSS类，基于OP，如下所示：

.info-box { 
    height: 300px;
}

通过使用
$（'#myTarget'）.toggleClass（'info-box'）
，您将删除或添加该类。如果你没有它，你会添加它。如果你有它，你会把它移除。就这样

因此，我刚才提供的一个工作示例就在这里，它自己实现了
toggle（）
，而不需要添加任何类，我相信这仍然实现了OP所寻求的解决方案


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


函数切换（）{
this.state=！this.state；//false-open；true-closed；default=false（因为尚未初始化）
this.innerHTML=this.state？'Close'：'Open'；
如果（本州）{
open（）；
}否则{
close（）；
}
}
函数open（）{
警报（“打开”）；
}
函数关闭（）{
警报（“关闭”）；
}
打开
打开
打开
可以在其上下文中保存按钮的状态。然后，根据其状态调用适当的函数


函数切换（）{
this.state=！this.state；//false-open；true-closed；default=false（因为尚未初始化）
this.innerHTML=this.state？'Close'：'Open'；
如果（本州）{
open（）；
}否则{
close（）；
}
}
函数open（）{
警报（“打开”）；
}
函数关闭（）{
警报（“关闭”）；
}
打开
打开
打开
如果您想在多个按钮上使用
切换
，这里是另一个答案。此解决方案使用按钮存储其目标的状态，因此它使用
toggle.call（）
在
toggle
中修改
此
的值

它的灵感来自和


for（i=1；i如果您想在多个按钮上使用
切换
，这里有另一个答案。此解决方案使用按钮存储其目标的状态，因此它使用
切换.call（）
在
切换
中修改
此
的值

它的灵感来自和


for（i=1；i我想出了一个简单的解决方案

单击打开链接并打开div时，我需要打开的链接消失，关闭的链接显示为单独的元素。相同的事件应反向工作，即关闭链接关闭div并显示打开
function show(target) {
    document.getElementById(target).style.display = 'block';
}
function hide(target) {
    document.getElementById(target).style.display = 'none';
}
function hideButton() {
    var x = document.getElementById("open");
    x.style.display = "none";
    var x = document.getElementById("close");
    x.style.display = "";
}
function showButton() {
    var x = document.getElementById("open");
    x.style.display = "";
    var x = document.getElementById("close");
    x.style.display = "none";
}

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

<div id="click-drop" style="display:none">

<a class="button" onclick="hide('click-drop');showButton()" id="close" style="display:none">Close</a>

</div>