Question

我正在建立一个投资组合网站，其中包含预览的项目描述，并在点击“阅读更多”后显示完整的详细信息。＆＃34;我对jQuery很陌生，但我让它工作，所以你点击＆＃34; Read More，＆＃34;该段落显示了＆＃34;关闭＆＃34;最后跨度，然后点击＆＃34;关闭＆＃34;它消失了。问题是＆＃34;阅读更多＆＃34;隐藏段落后不再出现。

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，只是我点击的那个＆＃34;阅读更多＆＃34; on。不确定这是否会影响寻找解决方案）

Answer 1

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

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

Answer 2

你做过的事情是件好事：你已经将你正在使用的东西包含在一个元素中。一个运行良好的方法是创建对该容器el的引用，然后使用它并创建对后代节点的引用。请注意，在下面的内容中，我并不关心哪些节点包含哪些节点，或者是哪些节点的兄弟节点 - 它们是.project-description的所有后代。通过在.each（）语句中创建对它们的引用，您可以在不会相互崩溃的页面上拥有多个副本。

＆＃13;

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

＆＃13;

.full {
  display: block;
}

.hidden {
  display: none;
}

.open {
  display: inline-block;
}

.read-more {
  background-color: #ccc;
}

＆＃13;

<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>

＆＃13;

jQuery - ＆＃34;阅读更多＆＃34;点击＆＃34; Read Less＆＃34;

2 个答案: