JQUERY-基于ID切换div

Question

我在一页上有很多div。每个都是无序列表的容器。在每个DIV的上方是一个标题文本，它由一个带有锚点的元素组成。

例如

<h2><a id="header1" href="#" > Header 1 </a></h3>
<div id="container1">
 <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
</div>

<h2><a id="header2" href="#" > Header 2 </a></h3>
<div <div id="container2">>
 <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
</div>

我需要有所有这些DIV隐藏，直到标题（锚）被点击。如果用户点击标题，它应该切换显示/隐藏DIV

如何在JQUERY中实现这一点，使所有div都有一个onClick函数，可能使用id来区分div？

<h2><a href="#" onclick="toggleDiv(container1)"> Header 1 </a></h3>

function toggleDiv(id) {

}

但是在JQUERY？

解决了的！！！！

<script>
 $(function(){
  $('.toggle-link').on('click', function() {
   var linkId = $(this).attr('data-div-id');
$('#' + linkId).toggle();
 });
});
</script>

<h2><a href="#" class="toggle-link" data-div-id="div1"> Header 1 </a></h2>
<div id="div1">
 <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
</div>

<h2><a href="#" class="toggle-link" data-div-id="div2"> Header 2 </a></h2>
<div id="div2">
 <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
</div>

Answer 1

在jQuery中可以使用. toggle（）

toggle（）方法在选定元素的hide（）和show（）之间切换。

function toggleDiv(id) {
  $('#'+id).toggle();   
}

其中id是您传递的参数