Question

我有多行article，在其中我有.article-row，其中包含.content，然后点击.article-row。当前的jQuery将找到.content，然后切换它。但我想更改代码，以便.hide() .content与所点击的

无关的

$('.article-row').click(function(){
    $(this).parent().find('.content').toggle();
});

个实例

<article class="feed1 entry">
    <span class="article-row">
        <span class="article-row-title">I am the title</span>
        <span class="article-row-date">Sat, 07 Sep 2013 02:13:35 -0700</span>
    </span>
    <div class="content">
        <p>I AM THE CONTENT</p>
    </div>
</article>

{{1}}

链接Here

Answer 1

$('.article-row').click(function(){
    if($(this).parent().find('.content').is(':visible')){
        $('.content').hide();
        $(this).parent().find('.content').show();
    }
});

隐藏所有元素，然后显示单击的元素。但首先验证点击的文章是否已经是活动文章，以确保它不会闪烁或看起来很奇怪，如果您为过渡设置动画。

Answer 2

            $('.article-row').click(function(){
                if($(this).parent().find('.content').is(':visible')){
                    $('.content').hide();
                }else{
                    $('.content').hide();
                    $(this).parent().find('.content').show();
                }
            });

Answer 3

这样不会更干净吗？

$('article.entry').on('click', '.article-row', function () {
    $(this).siblings('.content').show();
    $('.content').hide();
});

jQuery隐藏和切换

3 个答案: