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中的所有功能，它会更好。像这样：

＆＃13;

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); };
}

＆＃13;

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

＆＃13;

Answer 2

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

它的灵感来自jQuery.toggle()和Yuriy Yakym's answer。

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

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

＆＃13;

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");
}

＆＃13;

<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>

＆＃13;

Answer 4

jQuery toggle或toggleClass方法应该适合您。

根据要求编辑一个例子：

假设你有一个类似于此的CSS类，基于OP：

$('#myTarget').toggleClass('info-box')

使用toggle()，您将删除该类或添加它。如果您没有，请添加它。如果你有，你将把它删除。就像那样。

所以，我刚刚聚集在一起的工作示例就在这里，并且它自己实现if file_name.endswith(".txt"): print "something"而不需要添加任何类，我相信它仍然可以完成OP寻求解决的问题。

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

希望有所帮助！

Answer 5

我找到了一个直截了当的解决方案。

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

虽然我使用的原始代码使用内联高度属性来控制打开和关闭，但下面的示例使用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/

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

我如何编写这个，以便它使用不显眼的Javascript将行为附加到JS中的DOM元素，这意味着单独的HTML与JS
我怎么写这个用于多个div？我有十几个div，最初将关闭，每个div都使用我写的标记单独打开。我可以为每个div / unique ID等编写它，但这似乎是更糟糕的练习，我想学习最佳实践。

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

Answer 6

创建元素后

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

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

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

切换onclick事件onclick

修订问题

6 个答案: