Jquery 如何从其他图标中选择单个图标作为目标?
我有一个手风琴列表,当你点击它时,每个手风琴都会展开(+)并折叠(-)。问题是,当我尝试展开其中一个手风琴选项卡时,它可以很好地展开和折叠,但图标“-”/“+”符号也会为所有其他手风琴切换,即使它们没有被单击。我希望'-'/'+'图标只为我单击的手风琴切换,而不是为其他手风琴切换Jquery 如何从其他图标中选择单个图标作为目标?,jquery,css,font-awesome,accordion,Jquery,Css,Font Awesome,Accordion,我有一个手风琴列表,当你点击它时,每个手风琴都会展开(+)并折叠(-)。问题是,当我尝试展开其中一个手风琴选项卡时,它可以很好地展开和折叠,但图标“-”/“+”符号也会为所有其他手风琴切换,即使它们没有被单击。我希望'-'/'+'图标只为我单击的手风琴切换,而不是为其他手风琴切换 cshtml: <h2 class="accordion-toggle collapsed" data-toggle="collapse" href="#anyId" name=""><button&
cshtml:
<h2 class="accordion-toggle collapsed" data-toggle="collapse" href="#anyId" name=""><button>@l.GetElementValue("Title")</button></h2>
<div id="anyId" class="collapse">
@foreach ())
{
// looping through accordion list.
}
</div>
CSS:
.accordion-toggle:after {
font-family: 'FontAwesome'; /* essential to enable caret symbol*/
content: "\f068"; /* adjust as needed, taken from font-awesome.css */
color: #0046ad;
position: absolute;
left: .5em;
top: 50%;
margin-top: -12px;
font-size: 25px;
}
.accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
/*font-family: 'FontAwesome';*/
content: "\f067"; /* adjust as needed, taken from font-awesome.css */
/*color: #0046ad;
position: absolute;
left: .5em;
top: 50%;
margin-top: -12px;
font-size: 25px;*/
}
cshtml:
@l、 GetElementValue(“标题”)
@foreach())
{
//循环浏览手风琴列表。
}
CSS:
.手风琴拨动:后{
字体系列:“FontAwesome”;/*启用插入符号必不可少*/
内容:“\f068”/*根据需要调整,取自font-awome.css*/
颜色:#0046ad;
位置:绝对位置;
左:.5em;
最高:50%;
边缘顶部:-12px;
字体大小:25px;
}
.手风琴切换。折叠:之后{
/*“折叠”面板的符号*/
/*字体系列:“FontAwesome”*/
内容:“\f067”/*根据需要调整,取自font-awome.css*/
/*颜色:#0046ad;
位置:绝对位置;
左:.5em;
最高:50%;
边缘顶部:-12px;
字体大小:25px*/
}
只需在默认情况下删除折叠的类并在css下面使用
.accordion-toggle:after {
font-family: 'FontAwesome'; /* essential to enable caret symbol*/
content: "\f067";
position: absolute;
left: .5em;
top: 50%;
margin-top: -12px;
font-size: 25px;*/
}
.collapsed:after {
content: "\f068";
}
请参考下面的链接,我在这里使用了你的结构。忽略js,试试css
您能添加生成的HTML和任何相关的JS吗?请编辑您的问题,而不是粘贴到评论中,然后转到StackOverflow。请编辑您的问题并在问题中添加一个图标,以便更快、更好地回答问题。我想我的一般问题是,如何为手风琴设置一个单独的图标,而不是将该图标作为所有手风琴的共享图标?@Cliff您可能需要通过js fiddle或stackblitz提供一个工作片段。乍一看,您似乎正在使用插件。我原以为你的问题是由于每个项目之间有一个共享的选择器,但如果没有一个有效的示例,很难说出来。感谢@Jignasa在这方面的帮助。这正在起作用。嗨@jignasha,我有一个后续问题。我想知道有没有一种方法可以直接在CSS或JS中使用Font Awest类,比如()来代替像f067、f068这样的Font Awest unicodes?