Question

我正在尝试使用一些问题和答案构建简单列表。单击问题后，答案如下所示，在页面加载时，它将被隐藏。我在所有问题上都使用相同的类，所以问题是当我点击展开答案时，以下所有答案都会得到扩展。我怎么解决这个问题？下面是脚本。 Jsfiddle：http://jsfiddle.net/36Y5w/

<script type="text/javascript">
$(document).ready(function() {

    $('.faq_content').hide();

    $('.faq_circle').click(function(){
        var $target = $('.faq_content');
        if( $target.is(':visible') ){
            $target.slideUp(400,function(){
                $target.addClass('feature-folded');
            });
            $(this).text('+');
        }
        else{
            $target.removeClass('feature-folded');
            $target.slideDown();
            $(this).text('-');
        }
    });

 });
</script>

Answer 1

$('.faq_circle').click(function(){
        var $target = $(this).next().children('.faq_content');
        if( $target.is(':visible') ){
            $target.slideUp(400,function(){
                $target.addClass('feature-folded');
            });
            $(this).text('+');
        }
        else{
            $target.removeClass('feature-folded');
            $target.slideDown();
            $(this).text('-');
        }
    });

Answer 2

不要使用类'.faq_content'定位所有元素，而只需选择具有该类的下一个元素。这应该可以解决问题。

var $target = $(this).next('.faq_content');

单击显示具有相同类名的hide

2 个答案: