Javascript JQUERY-基于ID切换div

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

e、 g

项目1
项目2
项目3


项目1
项目2
项目3

我需要隐藏所有这些div，直到单击标题（锚定）。如果用户单击标题，则应切换显示/隐藏DIV

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

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

function toggleDiv(id) {

}

函数切换DIV（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>

$（函数（）{
$（'.toggle link'）。在（'click'，function（）上{
var linkId=$（this.attr（'data-div-id'）；
$（'#'+linkId）.toggle（）；
});
});

项目1
项目2
项目3


项目1
项目2
项目3

您可以在jQuery中使用

.toggle（）

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

---

其中id是您传递的参数

谢谢，我终于找到了答案。我正在将上面的代码更新为reflect@JakeSays好的很乐意帮忙

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

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