隐藏'阅读更多'和'更少显示'的标签

Question

我不明白为什么我的'阅读更多'和'更少显示'不会切换显示。

我有更多标签的多个实例，这里是处理这个脚本：

<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的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结构上非常重要。如果标记发生变化，父母/孩子不一样，你可以看到这个突破。