javascript - JQUERY - 根据 ID 切换 div

Question

我在一个页面上有大量的 DIV。每个都是无序列表的容器。每个 DIV 上方是一个标题文本，它由一个带有 anchor 的元素组成。

例如

<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，直到标题( anchor )被点击。如果用户单击标题，它应该切换显示/隐藏 DIV

我如何才能在 JQUERY 中以一种可以为所有 DIVS 提供一个 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() method toggles between hide() and show() for the selected elements.

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

其中id是你传递的参数