我有这个div:
<div class="services_box">
<div class="BOX_A">
<img src="css/images/icon1.png" alt="" />
<h1>Services title goes here</h1>
<p>Aenean ultrices purus porttitor oro er risus molestie vestibulum. Morbi et nus metus justo, semper eget condimentum vitae, con varius ut sapien. Ut egestas enim non ante sagittis eget egestas tellus consequat.</p>
<div class="servicesbutton"> <a href="#" title=""></a> </div>
</div>
<div class="BOX_B" **style="display:none;"**>
<img src="css/images/icon1.png" alt="" />
<h1>Services title goes here</h1>
<p>Aenean ultrices purus porttitor oro er risus molestie vestibulum. Morbi et nus metus justo, semper eget condimentum vitae, con varius ut sapien. Ut egestas enim non ante sagittis eget egestas tellus consequat.</p>
<div class="servicesbutton"> <a href="#" title=""></a> </div>
</div>
</div>
如何使用 jQuery/js 让隐藏的 div 在点击链接时滑入和滑出?
最佳答案
有这样的事吗? fiddle : http://jsfiddle.net/StJ9e/1/
$('div.BOX_A h1, div.BOX_B h1').click(function() {
$(this).siblings('.slide').slideToggle();
});
或者,如果您正在寻找 Accordion 式效果:
fiddle : http://jsfiddle.net/bK4rN/2/
var $last = jQuery('.BOX_A .slide');
$('.services_box').delegate('div > h1', 'click', function() {
$last.slideUp();
$last = $(this).siblings('.slide');
$last.stop(true, true).slideDown();
});
<小时/>
编辑:回复评论
I need something like this : jsfiddle.net/hJwqs/1 ... but i need only one this to change, not all.
将代码更改为:
$("div.BOX_A a").click(function () {
$(this).closest('.services_box').find('div.BOX_A').slideToggle();
});
fiddle : http://jsfiddle.net/garreh/3KBug/
或者对于有风格的:http://jsfiddle.net/garreh/cuEUG/
关于javascript - 如何使用 jQuery 在 div 上滑动和滑下,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6188372/