的slideToggle DIV不工作

Question

我有这样的代码：

$('.close-button').click(function() { 
 
\t $(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只能通过父母，而不是父母的兄弟姐妹。

$('.close-button').click(function() { 
 
\t $(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>

Answer 2

首先抢parent元素，然后拿到next元素吧：

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

要注意：closest方法获取该元素的最接近的父元素。