Question

我正在开发一个基于wordpress，显着主题的网站，使用视觉作曲家。

该网站为http://kingkongco.com.au/c-cor/about-us/ （抱歉，如果它运行缓慢，在有数百个其他人的服务器上！）

如果向下滚动，你会看到职员部分，每个人都有9个人阅读更多功能。

问题是：

当用户打开两个或更多块时，然后点击一个块的“隐藏内容”时，它会返回所有打开块的“读取更多”
此外，打开时，文本样式左对齐（YAY！），但在关闭时，它不会恢复为居中对齐。

我建议使用firebug（或类似的东西）检查html，因为这是在salient的可视化作曲中构建的，但是，这里是所有相关的代码：

HTML和（每个块除内容外相同）页脚功能：

(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

你的代码中发生的是＆＃34; .showcontent＆＃34;选择器正在从文档中选择所有类，但在我的代码中，我首先选择父div，然后找到＆＃34; .showcontent＆＃34;用于进行更改的类。与“＆＃39; p＆＃39;标签，因为我的代码正在调整所有＆＃39; p＆＃39;在div中心或你需要的时候：

(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

多个阅读更多按钮无法正常工作

2 个答案: