javascript - 如何通过单击链接以编程方式显示和隐藏 DIV？

Question

1) 如何以编程方式(无需编写 onclick="javascript:.."属性)将 JavaScript (jQuery) 函数附加到下面的链接？

2) 单击“声明”链接后切换隐藏/取消隐藏的最简单方法是什么？第一次单击应显示 DIV(取消隐藏)，第二次单击应隐藏它，依此类推。

<a>Statement</a>
<div id="taxStatement">insert select statement dropdownbox</div>

Answer 1

您可以为链接指定一个类，例如:

<a class="toggle" href="#">Statement</a>
<div id="taxStatement">insert select statement dropdownbox</div>

然后将脚本附加到 document.ready与 .click() 和 .toggle() 元素，如下所示:

$(function() {
  $("a.toggle").click(function(e) {
    $(this).next().toggle();
    e.preventDefault();
  });
});

您最初可以隐藏 <div> CSS 以多种方式:

#taxStatement { display: none; }

或者给它一个类，例如class="toggleDiv"并以相同的方式隐藏它们:

.toggleDiv { display: none; }

或者也在您的 document.ready 中，通过脚本:

$(".toggleDiv").hide();

You can give it a try/experiment here .