javascript - jQuery の非表示と切り替え

Question

その中に複数の行がarticleあり、その中にあり、.article-rowクリックされます。現在の jQuery は を見つけて切り替えます。しかし、そのすべてのインスタンスがクリックされたものに関連しないようにコードを変更したいと思います.content.article-row.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>

リンクHere

Answer 1

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

すべての要素を非表示にしてから、クリックした要素を表示します。ただし、最初に、クリックした記事がまだアクティブでないかどうかを確認して、トランジションをアニメーション化した場合にちらつきや奇妙に見えないことを確認してください。

Answer 2

こうすればもっときれいになりませんか？

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

Answer 3

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