JQUERY - 根据ID切换divs

Question

我在页面上有很多个DIV。每个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实现这一点，以便我可以为所有DIVS拥有一个onClick函数，并可能使用id来区分不同的divs？

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

- JakeSays

Answer 1

您可以在jQuery中使用.toggle()方法

toggle()方法在所选元素的隐藏和显示之间进行切换。

注：Original Answer翻译成“最初的回答”。

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

where id is the parameter you pass

- melvin

---

谢谢，我终于明白了。我正在更新上面的代码以反映。 - JakeSays

@JakeSays 好的，很高兴能帮忙。 - melvin