隐藏'read more'和'show less'标签

Question

我不明白为什么我的" read more "one_answers" show less "不能切换显示

我有多个read more标签的实例，下面是处理这个的脚本:

<script>
(function($) {
$('.showcontent').click(function(e) {
    $( this ).parent().next( '.cdscontainer' ).show();
     $( this).parent().next( '.showcontent').hide();
      $( this).parent().next('.hidecontent').show();
});
$('.hidecontent').click(function(e) {
    $( this ).parent('.cdscontainer').hide();
     $( this).parent().next('.hidecontent').hide();
      $( this).parent().next( '.showcontent').show();
});
})( jQuery );
 </script>

网站地址:www.kingkongco.com.au/c-cor/about-us(员工图片下)

谢谢你的帮助/建议!

Answer 1

可以将next('p')替换为next('.cdscontainer ')

$('.showcontent').click(function(){
  $(this).hide();
  $(this).parent().next('p').show();
})
$('.hidecontent').click(function(){
  $(this).parent().hide();
  $('.showcontent').show();
})

.cdscontainer {
    display: none;
  margin-top:-18px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="description">As General Manager,Volker is responsible for Engineering, Professional Services and day-to-day ef cient operations of the business including manufacturing, technical…<br>
<a class="showcontent">Read more…</a></p>
<p class="cdscontainer">…and engineering services, process management<br>
and professional services delivery.<br>
Recently, Volker was with Grass Valley USA, LLC where he held a technical leadership role as Regional Operations Manager AsiaPacific.<br>
In 1993 he was a commercial and technical manager for the original Foxtel/Telstra CATV Rollout as part of Philips (Koninklijke Philips N.V.).<br>
In this role he led vendor management for over 100 OEM vendors supplying Connectivity Equipment, Active Equipment and installation materials for the Telstra HFC Cable Network infrastructure rollout.<br>
Significantly, he established service platforms for post-rollout support of the Telstra HFC Cable Network. Volker also project managed the Telstra Digital Video Network rollout program.<br>
A highly capable executive with over 28-years professional experience in radio, telecommunications, broadband and television broadcast technologies.<br>
Volker has extensive experience in system engineering, project management and delivery of professional services.<br>
Volker was awarded a Graduate Diploma of Technology Management (Deakin University) and a Bachelor of Engineering – Electrical (Swinburne University of Technology).<br>
<a class="hidecontent">…Hide Content</a></p>

Answer 2

一开始，有四行什么都不做:

$( this).parent().next( '.showcontent').hide();
$( this).parent().next('.hidecontent').show();

和

$( this).parent().next('.hidecontent').hide();
$( this).parent().next( '.showcontent').show();

看一下jQuery下一个函数的描述。在第一种情况下，您将直接选择.showcontent的父元素(即.cdscontainer)之后的元素。

$(this).parent().next('.showcontent')

和

$(this).parent().next('.hidecontent')

将是空集合，因为.showcontent的父元素之后的下一个元素没有这两个类。因此，您的。show()和。hide()将不执行任何操作，因为没有元素可操作。

现在，要使它按照你想要的方式工作，你需要将第一组坏行更改为

$(this).hide(); //this is .showcontent
$(this).parent().next().find('.hidecontent').show(); //Need to find the .hidecontent element since it is a child of parent's next element

尽管您可以完全省略第二行，因为。hidcontent是基于。cdscontainer的可见性隐藏/显示的。

第二组坏行可以改为

$(this).hide(); //this is .hidecontent, but, as above can be omitted since .cdscontainer is hidden
$(this).parent().prev().find('.showcontent').show(); //Need to go to the parent's previous element and find child .showcontent since it appears in the DOM before .hidecontent

现在，这应该可以让你到达你想要的地方，但是要小心这种设置。您的功能在很大程度上基于HTML的结构。如果标记改变，并且父/子不一样，您可以看到这个中断。