如何改变多个手风琴的箭头？

Question

我在jQuery UI中创建了多个accordions，但我遇到了问题：

如果我的手风琴是这样嵌套的，如何更改箭头图标？

Demo

Answer 1

你可以这样做

var icons1 = {
  header: "ui-icon-arrowthick-1-e",
  activeHeader: "ui-icon-arrowthick-1-s"
};

var icons2 = {
  header: "ui-icon-circle-arrow-e",
  activeHeader: "ui-icon-circle-arrow-s"
};

var icons3 = {
  header: ".ui-icon-arrow-1-e",
  activeHeader: ".ui-icon-arrow-1-s"
};    

$( ".accoraccordionBorder" ).accordion({
    header: "h1" ,
    heightStyle: "content",
    icons: icons1
});


$( ".accoraccordionBorder2" ).accordion({
    header: "h2" ,
    heightStyle: "content",
    icons: icons2
});

$( ".accoraccordionBorder3" ).accordion({
    header: "h3" ,
    heightStyle: "content",
    icons: icons3
});

http://jsfiddle.net/mastermindw/BMJAv/3/

对于自定义箭头，如图所示，您需要编辑

中默认给出的图片

jquery-ui.css, line 281 
.ui-state-active .ui-icon { background-image: url(images/ui-icons_454545_256x240.png)/*{iconsActive}*/; } 

Answer 2

只需设置另一张背景图片代替箭头

目前的风格是（jquery-ui.css, row 281）

.ui-state-active .ui-icon {
    background-image: url("images/ui-icons_454545_256x240.png");
}
...
.ui-icon-triangle-1-s {
    background-position: -64px -16px;
}

所以你只需要创建另一个规则，至少具有相同的特异性（或使用!important）与另一个背景图像和位置