jquery - SlideToggle div 不起作用

Question

我有这个代码:

$('.close-button').click(function() {
	$(this).closest('#hidden').slideToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="bloc">
  <h2>Click on that link to display the content <a href="#" class="close-button">Click here</a></h2>
  <div id="hidden">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus augue ante, fringilla ac sodales et, vehicula pellentesque ante. Integer id mattis erat, nec tincidunt nisi. </p>
  </div>
</div>

<div class="bloc">
  <h2>Click on that link to display the content <a href="#" "close-button">Click here</a></h2>
  <div id="hidden">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus augue ante, fringilla ac sodales et, vehicula pellentesque ante. Integer id mattis erat, nec tincidunt nisi. </p>
  </div>
</div>

单击链接时，将显示 div #hidden。

我尝试在 Jquery 中执行此操作，但它不起作用。

感谢您的帮助!

Answer 1

不要使用重复的id，而是使用class。

.closest 仅通过 parent 查找，而不是通过 sibling 查找这些 parent 。

$('.close-button').click(function() {
	$(this).parent().next().slideToggle();
});

.hidden{
    display:none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="bloc">
  <h2>Click on that link to display the content <a href="#" class="close-button">Click here</a></h2>
  <div class="hidden">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus augue ante, fringilla ac sodales et, vehicula pellentesque ante. Integer id mattis erat, nec tincidunt nisi. </p>
  </div>
</div>

<div class="bloc">
  <h2>Click on that link to display the content <a href="#" class="close-button">Click here</a></h2>
  <div class="hidden">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus augue ante, fringilla ac sodales et, vehicula pellentesque ante. Integer id mattis erat, nec tincidunt nisi. </p>
  </div>
</div>