javascript - 如何使用 jQuery 切换文本和图标？

Question

我有一个accordion .

当我点击显示详细信息时:

• Accordion 内容将会扩展，
• 文本将从显示详细信息更改为隐藏详细信息
• 图标将从 + 更改为 x
• 再次点击它应该会切换回原始状态。

我无法让它工作。当我点击它时，它永远停留在 HIDE DETAILS 状态。

<小时/>JS

 $(".show-details-sk-p").click(function () {
     $(".show-details-txt-sk-p-r").text("HIDE DETAILS");
     $(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/e9eydpbct/remove.png");
 });

<小时/>

有人可以给我一点插入吗？

I've put together a Fiddle - 以防万一需要。

Answer 1

检查了 Action 和元素的行为，发现#sk-p-r会有类in来决定是否折叠。

 $(".show-details-sk-p").click(function () {
     var isCollapse = $('#sk-p-r').hasClass('in');
     var text = isCollapse ?  'SHOW DETAILS' : 'HIDE DETAILS';
     var img = isCollapse ? 'http://s6.postimg.org/e9eydpbct/plus.png' : 'http://s6.postimg.org/bglqtob0d/remove.png'
     $(".show-details-txt-sk-p-r").text(text);
     $(".icon-sk-p-r-toggle").attr("src", img);
 });