Mulitple閱讀更多按鈕無法正常工作

Question

我正在使用視覺作曲器構建於WordPress，顯着主題的網站上。

該網站是http://kingkongco.com.au/c-cor/about-us/ （抱歉，如果它運行速度慢，與服務器上的數百人！）

如果向下滾動，你會看到員工部分，每一個讀更多功能9人。

的問題是：

當用戶打開兩個或兩個以上的塊，然後打一個塊的「隱藏內容」
• ，它重新開啓了「閱讀更多」用於所有打開的塊
• 還，當打開時，文本樣式左對齊（YAY！），但是在關閉時，它不會恢復到中心對齊。

我建議使用螢火蟲（或類似的東西）來檢查HTML，因爲這是建立在顯着的視覺作曲家，然而，這裏是所有培訓相關代碼這種情況：

HTML和（每塊是相同的除了內容）頁腳funtion：

(function($) { 
 
    $('.showcontent').click(function() { 
 
    $(this).hide(); 
 
    $(this).parent().next('p').show(); 
 
    $(this).parent("p").css("text-align", "left"); 
 
    }) 
 
    $('.hidecontent').click(function() { 
 
    $(this).parent().hide(); 
 
    $('.showcontent').show(); 
 
    $(this).parent("p").css("text-align", "center"); 
 
    }) 
 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<img title="Howard Rupert" src="http://kingkongco.com.au/c-cor/wp-content/uploads/2016/08/profile1.png" alt="Howard Rupert" /> 
 
<h4 class="light">Howard Rupert</h4> 
 
<div class="position">account director</div> 
 
<p class="description">Howard is a highly capable, deeply experienced technical sales leader with a wealth of exposure to HFC Connectivity Equipment since 1989. Today he leads C-COR’s CONNECTIONS product 
 
    <a class="showcontent">Read more…</a> 
 
</p> 
 
<p class="cdscontainer">line which includes passive products such as coaxial cable, coaxial hard-line, cable connectors, optical cable, optical connectors, Taps and all other passive devices plus DOCSIS and RF test equipment. Howard joined C-COR from Pacific Broadband Networks 
 
    in 2014 where he was Sales Director for North America and Oceania sales. Previously, he served an extensive career with C-COR Inc. originally in USA and then in Hong Kong as an AsiaPac account leader. He developed country plans and engaged manufacturing 
 
    product line management for Connectivity Equipment requirements. Howard started in the DOCSIS Cable Networks industry in 1989. In this time, Howard has been part of an industry evolution from CableLabs DOCSIS 1.0 to the emerging DOCSIS 3.1 standard. 
 
    With over 25 years of international technical sales experience Howard has been engaged in optical cables, coaxial cables including experience in military product specifications and high current connectors. Howard was awarded a Masters of Business Administration 
 
    (University of Western Ontario) and a Bachelor of Science (Pennsylvania State University). 
 
    <a class="hidecontent">...Hide Content</a> 
 
</p>

感謝您的幫助/諮詢/建議！

Answer 1

試試這個替換this與showcontent類。

當你點擊閱讀更多我基本上隱藏所有的showcontent類，然後我只是打開你單擊一個。

(function($) { 
$('.showcontent').click(function(){ 
    $('.showcontent').hide(); 
    $(this).parent().next('p').show(); 
    $(this).parent("p").css("text-align", "left"); 
}) 
$('.hidecontent').click(function(){ 
    $(this).parent().hide(); 
    $('.showcontent').show(); 
    $(this).parent("p").css("text-align", "center"); 
}) 
})(jQuery); 

Answer 2

什麼在你的代碼發生的是，「.showcontent」選擇被從文件中選擇所有類，但在我的代碼我首先選擇父格，然後找到「.showcontent」類進行更改。它與'p'標籤相同，因爲我的代碼將div中的所有'p'標記對齊到中心或根據需要：

(function($) { 
$('.showcontent').click(function(){ 
    $(this).hide(); 
    $(this).next('p').show(); 
    $(this).closest("div").find("p").css("text-align", "left"); //changed 
}); 
$('.hidecontent').click(function(){ 
    $(this).parent().hide(); 
    $(this).closest("div").find('.showcontent').show(); //changed 
    $(this).closest("div").find("p").css("text-align", "center"); //changed 
}); 
})(jQuery