Question

我无法弄清楚为什么我会更多地阅读＆＃39;并且＆＃39;显示更少＆＃39;不会切换显示。

我有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 ')

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

开始时，你的四条线路什么都不做：

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

和

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

看看jQuery的next function的描述。在第一种情况下，您将直接在.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

虽然你可以完全省略第二行，因为.hidecontent是基于.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的结构。如果标记发生变化，而且父母/孩子不一样，那么你可以看到这个突破。

隐藏＆＃39;阅读更多＆＃39;并且＆＃39;显示更少＆＃39;标签

2 个答案: