如何向上滑动当前的div

Question

我想将当前打开的div向上滑动（不起作用），但是当我打开另一个div时，之前的div必须向上滑动（起作用）。 也许有人可以帮助我。

这是一个有问题的jsfiddle： http : //jsfiddle.net/Evolutio/xbsm734f/

我的jQuery代码如下所示：

$(document).ready(function(){
    $('.faq_desc').hide();
    $('.faq li.faq_head').click(function(e){
        var $i = $('ul.faq i.fa');
        $i.removeClass('fa-caret-up').addClass('fa-caret-down');
        $(this).find('i.fa').removeClass('fa-caret-down').addClass('fa-caret-up');

        if($(this).siblings().hasClass('slided_down')==false) {
            $('ul.faq .slided_down').removeClass('slided_down');
        }

        var $faq_desc = $(this).find('.faq_desc');
        if($faq_desc.hasClass('slided_down')) {
            $faq_desc.removeClass('slided_down').slideUp();
        } else {
            $faq_desc.addClass('slided_down').slideDown();
        }

        $(this).siblings().find('.faq_desc').slideUp();
        e.preventDefault();
    });
});

我的html：

<ul class="faq">
    <p>&nbsp;</p>
    <li class="faq_head">
        <h4 class="ff_os_b">asdaasdasd&nbsp;&nbsp;<i class="fa fa-caret-down"></i></h4>
        <div class="faq_desc fs_14 lh_14" style="display: none;">
            <p>asdasdasdadasdasdasdasdassdasd</p>
        </div>
    </li>
    <p>&nbsp;</p>
    <li class="faq_head">
        <h4 class="ff_os_b">asdadasdasdasdasd&nbsp;&nbsp;<i class="fa fa-caret-down"></i></h4>
        <div class="faq_desc fs_14 lh_14" style="display: none;">
            <p>asdsadadasdasdasdasdadasd</p>
        </div>
    </li>
    <p>&nbsp;</p>
    <li class="faq_head">
        <h4 class="ff_os_b">asdasdasdasdsa&nbsp;&nbsp;<i class="fa fa-caret-down"></i></h4>
        <div class="faq_desc fs_14 lh_14" style="display: none;">
            <p>dadsadadaassdasdasdasd</p>
        </div>
    </li>
    <p>&nbsp;</p>
    <li class="faq_head">
        <h4 class="ff_os_b">asdasdasdasdasdasasdasdasdasdas&nbsp;&nbsp;<i class="fa fa-caret-down"></i></h4>
        <div class="faq_desc fs_14 lh_14" style="display: none;">
            <p>dasdasdadasdsadsadasdsadasdasd</p>
        </div>
    </li>
</ul>

Answer 1

您可以使用.slideToggle()

$(document).ready(function(){
    $('.faq_desc').hide();
    $('.faq li.faq_head').click(function(e){    
        $(this).siblings().find('.faq_desc').slideUp().removeClass('slided_down');
        $(this).find('.faq_desc').slideToggle().toggleClass('slided_down');
        e.preventDefault();
    });
});

演示

更新资料

$(document).ready(function(){
    $('.faq_desc').hide();
    $('.faq li.faq_head').click(function(e){
           var $i = $('ul.faq i.fa');
        $i.not($(this).find('i.fa')).removeClass('fa-caret-up').addClass('fa-caret-down');
        $(this).find('i.fa').toggleClass('fa-caret-down fa-caret-up')
        $(this).siblings().find('.faq_desc').slideUp().removeClass('slided_down');
        $(this).find('.faq_desc').slideToggle().toggleClass('slided_down');
        e.preventDefault();
    });
});

演示