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顯示多個圖標

回答

相關問題