javascript - jQuery – 单击 "Read More"后 "Read Less"span 不再出现

Question

我正在建立一个作品集网站，其中包含元素描述，可以通过摘录进行预览，并在单击“阅读更多”后显示完整详细信息。我是 jQuery 的新手，但我让它工作了，所以你点击“阅读更多”，该段落末尾显示一个“关闭”跨度，然后你点击“关闭”它就会消失。问题是隐藏段落后“阅读更多”不会重新出现。

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');
  })
});

(我的网站只有一页，所以我尝试以一种不会打开我其他元素的所有描述的方式编写 JS，只是我单击“阅读更多”的那个。不确定这是否会影响寻找解决方案)

Answer 1

.open 不是 .close 的父级 - 因此您需要按如下方式选择它:

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