javascript - 如何使用 jQuery 在 div 上滑动和滑下

Question

我有这个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 在点击链接时滑入和滑出？

Answer 1

有这样的事吗？ 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/