切换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更改为“ 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> 

Answer 2

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

它的灵感来自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> 

Answer 4

jQuery切换或toggleClass方法都可以满足您的需要。

根据要求编辑示例：

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

.info-box { 
    height: 300px;
}

通过使用$('#myTarget').toggleClass('info-box') ，您将删除该类或将其添加。 如果没有它，则将其添加。 如果有，则将其删除。 就这样

因此，这里有一个我刚刚提出的工作示例，它无需添加任何类toggle()实现toggle() ，我相信这仍可以完成OP所寻求的解决方案。

https://jsfiddle.net/bbh9m478/1/

希望有帮助！

Answer 5

我想出了一个简单的解决方案。

单击打开链接并打开div时，我需要打开链接消失并且关闭链接显示为单独的元素。 相同事件应反向运行，即关闭链接关闭div并显示打开链接。

当我使用的原始代码使用内联height属性控制打开和关闭时，以下示例使用display属性。

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>              

这是在野外-http://iemajen.com/scripts/mssa/

有了这个，我还有两个问题。

1. 我将如何编写它，以便它使用不引人注目的Javascript将行为仅从JS内附加到DOM元素，这意味着将HTML与JS分开
2. 如何编写可在多个div上使用的代码？ 我有一打div，这些div最初将关闭，每个div都使用我编写的标记单独打开。 我可以为每个div /唯一ID等编写代码，但这似乎是更糟糕的做法，我想学习最佳做法。

我应该为最后一个问题打开一个新主题吗？

Answer 6

创建元素之后

var elem = document.querySelector('.js-switch'); var init = new Switchery(elem);

像这样将您的OnClickMetod绑定到init.switcher

$(init.switcher).on('click', OnClickMetod);