jQuery - "Read Less"をクリックした後にスパンが再表示されない

Question

私はプロジェクトの説明を抜粋してプレビューし、 "Read More"をクリックすると詳細を表示します。私はjQueryを初めて使っていますが、「Read More」をクリックするようになっています。最後に「Close」スパンが表示され、「Close」をクリックすると、それが消えます。段落が隠された後、問題は "続きを読む"が再表示されません。

https://codepen.io/anon/pen/OOegJx

<div class="project-description"> 
    <p class="excerpt">Excerpt goes here.</p> 
    <span class="read-more open">Read More</span> 
    <p class="full hidden">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos. 
    <span class="read-more close">Close</span></p> 
</div> 


.full { 
    display: block; 
} 

.hidden { 
    display: none; 
} 

.open { 
    display: block; 
} 


$(document).ready(function(){ 
    $('.open').click(function() { 
    $(this).siblings('.full').removeClass('hidden'); 
    $(this).css('display', 'none'); 
    }) 

    $('.close').click(function() { 
    $(this).parent('.full').addClass('hidden'); 
    $(this).parent('.open').css('display', 'block'); 
    }) 
}); 

（私のサイトは1ページであるので、私は私の他のプロジェクトの説明をすべて、私は読む」クリック一つだけを開かないような方法でJSを書き込もうとしました。

Answer 1

.open）それが解決策を見つける影響するかどうかわからないの」よりは.closeの親ではありません - あなたは、次のようにそれを選択する必要があります：あなたはそれをやった

$(this).parent().siblings('.open').css('display', 'block'); 

Answer 2

何かがあります素晴らしいことです：あなたは、あなたが作業しているものを単一の要素に入れました。うまくいくものは、そのコンテナへの参照を作成し、それを使用して子孫ノードへの参照を作成することです。次の点に注意してください。どのノードに何が含まれているか、または兄弟であるかは気にしません。それらはすべて.project-descriptionの子孫です。 .each（）ステートメント内でそれらへの参照を作成することにより、互いに衝突しないページに複数のコピーを置くことができます。

$(document).ready(function(){ 
 
    var containerEl = $('.project-description'); 
 
    
 
    containerEl.each(function(){ 
 
    var openEl = $(this).find('.open'); 
 
    var closeEl = $(this).find('.close'); 
 
    var fullEl = $(this).find('.full'); 
 

 
    openEl.click(function() { 
 
     fullEl.removeClass('hidden'); 
 
     $(this).css('display', 'none'); 
 
    }) 
 

 
    closeEl.click(function() { 
 
     fullEl.addClass('hidden'); 
 
     openEl.css('display', 'inline-block'); 
 
    }) 
 
    
 
    }) 
 
});

.full { 
 
    display: block; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
} 
 

 
.open { 
 
    display: inline-block; 
 
} 
 

 
.read-more { 
 
    background-color: #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="project-description"> 
 
    <p class="excerpt">Excerpt goes here.</p> 
 
    <span class="read-more open">Read More</span> 
 
    <p class="full hidden">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos. 
 
    <span class="read-more close">Close</span></p> 
 
</div> 
 
<div class="project-description"> 
 
    <p class="excerpt">Second goes here.</p> 
 
    <span class="read-more open">Read More</span> 
 
    <p class="full hidden">Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. 
 
    <span class="read-more close">Close</span></p> 
 
</div> 
 
<div class="project-description"> 
 
    <p class="excerpt">And another goes here.</p> 
 
    <span class="read-more open">Read More</span> 
 
    <p class="full hidden">Pellentesque in ipsum id orci porta dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. 
 
    <span class="read-more close">Close</span></p> 
 
</div>