javascript - 如何向 CSS Accordion 添加加减号

Question

最初的手风琴是 Jasson Qasqant 在 Codepen 上创作的。

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

我想添加一个与此类似的加减号：

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

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

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

谢谢！

Answer 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/

Answer 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>