JQuery UIアコーディオンウィジェットは複数のアイコンを表示します

Question

JQuery UIアコーディオンウィジェットに問題があります。私はアコーディオンを働かせることができ、アイコンは折りたたまれて展開されたアコーディオンのために表示されますが、+/-アイコンだけでなくすべてのアイコンが表示されます。ここで

を展開すると

を崩壊

は、それが

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

に呼び出されているHTML jQueryのウィジェットここ

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

のための私のドライバーです0

私がダウンロードしたJQuery-UI zipファイルには、使用可能なさまざまなアイコンがすべて含まれている6つのファイルがあり、アコーディオンが展開または折りたたまれているときに、行全体が表示され、左に移動してアイコンを隠すように見えます。テーマローラーを使用して自分のテーマをロールし、必要なアイコンだけを取得するか、ドライバで指定する必要がある高さ/幅/オフセット設定があるかどうかを確認する必要があります。私はドキュメンテーションに従おうとしましたが、それはあまり役に立ちません。

Answer 1

これは、jQueryのUIのCSSの

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

と<div class="accordion">が<div class="content">内にネストされたので、私はサイト

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

の他の部分のために使用していたいくつかのCSS間のCSSの衝突があった判明します.content spanのCSSは、 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%; 
}