JQuery UI Accordion Widget显示多个图标

我遇到了JQuery UI手风琴小部件的问题。我可以得到手风琴的工作和显示折叠和扩展手风琴的图标，但是我获得了所有图标，而不仅仅是+/-图标。JQuery UI Accordion Widget显示多个图标

折叠时

展开时

这里是我的JQuery的插件

$(function() { 
    $('.accordion').accordion({ 
     "header" : "h3", 
     "icons": { 
      "header": "ui-icon-plus", 
      "activeHeader": "ui-icon-minus" 
     }, 
     "heightStyle": "content", 
     "collapsible": true, 
     "active": false, 
    }); 
});

此驱动程序也被称为上

<div class="accordion"> 
    <h3></h3><!--Left blank to show all the icons showing--> 
    <div> 
     <p>This is sample Content</p> 
    </div> 
</div>

的HTML 0

我下载的JQuery-UI压缩文件带有6个文件，其中包含所有可用的各种图标，并且它看起来像整行显示并且在手风琴展开或折叠时隐藏一些图标。我是否必须使用主题滚轮来滚动我自己的主题，并只获取我想要的图标，或者是否需要在驱动程序中指定一些高度/宽度/偏移设置。我试图按照文档，但它不是非常有帮助。

来源

2016-09-07 TheDude

原来有JQuery的UI CSS

.ui-icon { 
    width: 16px; 
    height: 16px; 
}

，我用的网站

.content span { 
    color : #B47000; 
    font-size : 1.25em; 
    width : 100%; 
}

的其他部分由于<div class="accordion">被嵌套在<div class="content">一些CSS之间的CSS碰撞.content span的css覆盖了.ui-icon css，因为JQuery UI在头元素内插入<span class="ui-icon ui-icon-plus">来保存图标。

我改变了我的CSS是更独家，并解决了这个问题。

/*Adding > fixed the error*/ 
.content > span { 
    color : #B47000; 
    font-size : 1.25em; 
    width : 100%; 
}

来源

2016-09-08 00:38:47 TheDude

JQuery UI Accordion Widget显示多个图标

回答

相关问题