SlideToggle div不起作用

Corentin Branquet 发表于 Dev

科伦丁宴会

我有这个代码：

$('.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>

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

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

谢谢你的帮助！

本

请勿使用重复项id，而应使用class。

.closest 只通过父母查找，而不是通过兄弟姐妹查找。

$('.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>