jquery - 如何更改多个 Accordion 的箭头？

Question

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

如果 Accordion 是这样嵌套的，我该如何更改箭头图标？

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}*/; }