隱藏'閱讀更多'和'更少顯示'的標籤

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結構上非常重要。如果標記發生變化，父母/孩子不一樣，你可以看到這個突破。