Question

1）如何以编程方式（不编写onclick =“javascript：..”属性）将JavaScript（jQuery）函数附加到下面的链接？

2）点击Statement链接后切换hide / unhide的最简单方法是什么？首先单击应显示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

Answer 2

对于问题1和2，您需要使用切换：

$('a').toggle(
function () {
  // Unhide Statement
  $('#taxStatement').show();
},
function () {
  $('#taxStatement').hide();
});

Answer 3

   var theDiv = $('#taxStatement');

   theDiv.hide();
// make the div hidden by default.

   theDiv.prev('a').click(function(){ theDiv.toggle(); });
// ^^^^^^^^^^^^^^^^^^^^^^             ^^^^^^^^^^^^^^^^
// Attach the onclick                 hide & unhide.
//  assume the <a> is 
//  immediately before that <div>.
// It may be better to give an
//  id to that <a>.

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

3 个答案: