如何使用 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

像这样的东西？ 小提琴： http://jsfiddle.net/StJ9e/1/

$('div.BOX_A h1, div.BOX_B h1').click(function() {
    $(this).siblings('.slide').slideToggle();
});

或者，如果您正在寻找手风琴式效果：

小提琴： 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();
});

---

编辑：回应评论

我需要这样的东西：jsfiddle.net/hJwqs/1 ...但我只需要一个这个来改变，而不是全部。

将您的代码更改为：

$("div.BOX_A a").click(function () {
    $(this).closest('.services_box').find('div.BOX_A').slideToggle();
});

小提琴： http://jsfiddle.net/garreh/3KBug/

或者一个风格的： http://jsfiddle.net/garreh/cuEUG/

Answer 2

您可以使用.fadeIn()方法使其出现，使用.fadeOut() () 方法使其消失，也可以使用

.toggle() method, you can search more on google, here are the docs anyway:

切换： http://api.jquery.com/toggle/

淡入： http://api.jquery.com/fadeIn/

淡出： http://api.jquery.com/fadeOut/

Answer 3

不太清楚你的意思是这样的吗？

$(document).ready(function() {
    $("div.BOX_A").bind("click", function() { $(this).slideToggle(); });
    $("div.BOX_B").bind("click", function() { $(this).slideToggle(); });
});

http://jsfiddle.net/AFLUp/

如果您澄清应该看到/隐藏的确切内容等，我可以修改代码以帮助您:)