Question

我想要滑动打开的当前div（不起作用），但是当我打开另一个div时，之前的div必须滑动（可行）。也许任何人都可以帮助我。

这是一个解决问题的方法：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();
    });
});

DEMO

<强>更新

$(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();
    });
});

DEMO

如何向上滑动当前div

1 个答案: