Question

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

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

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

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

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

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

谢谢！

Answer 1

添加伪类：

content:"+";

有些js喜欢这样：

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

OR

只需使用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来生成这个元素，做出减号，只需带走：之后......

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

如何在CSS Accordion中添加加减号

2 个答案: