jquery - 如何更改多个手风琴的箭头？

Question

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

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

演示

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）与另一个背景图像和位置