jQuery 如何在 CSS Accordion 中添加加减号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18210249/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I add plus minus symbol to CSS Accordion
提问by user2660470
The original accordion is by Jasson Qasqant on Codepen.
最初的手风琴是由 Jasson Qasqant 在 Codepen 创作的。
Here is my version: http://cdpn.io/kaHeo
这是我的版本：http: //cdpn.io/kaHeo
I would like to add a plus minus similar to this:
我想添加一个与此类似的加减：
http://codepen.io/auginator/pen/tCwDc
http://codepen.io/auginator/pen/tCwDc
Can someone please help me, nothing I've tried worked and I've never written JS before so I was hoping to copy the functions but it's not working.
有人可以帮助我吗，我尝试过的任何方法都不起作用，而且我以前从未编写过 JS，所以我希望复制这些函数，但它不起作用。
All tested suggestions welcome. I would need a working example as I don't know how to implement the JS so it works with the CSS and HTML.
欢迎所有经过测试的建议。我需要一个工作示例，因为我不知道如何实现 JS，因此它可以与 CSS 和 HTML 一起使用。
Thank you!
谢谢！
回答by Riskbreaker
Add a pseudo class:
添加伪类：
content:"+";
And some js like so:
还有一些像这样的js：
OR
或者
just use JQuerys UI method:
只需使用 JQuerys UI 方法：
$(".accordion").accordion({
collapsible: true,
active: parseInt(active_item),
heightStyle: "content",
icons: {
"header": "ui-icon-plus",
"activeHeader": "ui-icon-minus"
}
});
回答by Seth Henry Roberts
http://jsfiddle.net/vkdzuqex/8/
http://jsfiddle.net/vkdzuqex/8/
There is some code I busted out, using all css to generate this element, to make the minus, just take away the :after...
我删除了一些代码，使用所有 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>
