如何向 CSS Accordion 添加加减号答案

【问题标题】：How can I add plus minus symbol to CSS Accordion如何向 CSS Accordion 添加加减号
【发布时间】：2013-08-13 13:19:42
【问题描述】：

原始手风琴由 Jasson Qasqant 在 Codepen 上创作。

这是我的版本： http://cdpn.io/kaHeo

我想加一个类似这样的加减号：

http://codepen.io/auginator/pen/tCwDc

有人可以帮助我吗，我尝试过的没有任何工作，而且我以前从未编写过 JS，所以我希望复制这些功能，但它不起作用。

欢迎所有经过测试的建议。我需要一个工作示例，因为我不知道如何实现 JS，因此它适用于 CSS 和 HTML。

谢谢！

【问题讨论】：

打开和关闭容器的js你写了吗？

标签： javascript jquery css accordion

【解决方案1】：

添加一个伪类：

content:"+";

还有一些像这样的js：

http://jsfiddle.net/Na5FY/2/

或

只需使用 JQuerys UI 方法：

$(".accordion").accordion({
    collapsible: true,
    active: parseInt(active_item),
    heightStyle: "content",
    icons: {
        "header": "ui-icon-plus",
        "activeHeader": "ui-icon-minus"
    }
});

http://jsfiddle.net/4M6vH/3/

【讨论】：

这些是很好的建议，谢谢，但我正在寻找一个可以使用我当前代码的人，你对此有什么建议吗？我尝试只使用 JQuery UI 但它不起作用，我可能做错了什么。
还有Riskbreaker，我应该把“内容：”+“；”放在哪里？
那是因为您需要在代码中获取 Jquery UI。我认为这是让手风琴按照您想要的方式工作的最佳方式。去获取它：jqueryui.com/accordion

【解决方案2】：

http://jsfiddle.net/vkdzuqex/8/

我破解了一些代码，使用所有 css 生成这个元素，做减号，只需去掉 :after...

.plus {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  border: 1px solid #B4B4B4;
}
.plus:before {
  content: '';  
  width: 25px;
  height: 1px;
  border-top: 1px solid #B4B4B4;
  display: block;
  position: absolute;
  margin-top: 15px;
  margin-left: 3px;
}
.plus:after {
  content: '';  
  width: 1px;
  height: 25px;
  border-right: 1px solid #B4B4B4;
  display: block;
  position: absolute;
  margin-top: 3px;
  margin-left: 14px;
}

<div class="plus"></div>

【讨论】：