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中以可以为所有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（）方法在所选的hide（）和show（）之间切换元素。

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

其中id是您传递的参数

JQUERY-根据ID切换div

1 个答案: