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