jQuery UI的手風琴自定義圖標加載但在DIV

我有一個問題讓我的自定義圖標在我的手風琴出現頁面上

沒有出現，它們的加載，他們的onclick切換從jQuery UI的手風琴自定義圖標加載但在DIV

<span class="ui-accordion-header-icon ui-icon iconClosed"></span> to `<span class="ui-accordion-header-icon ui-icon iconOpen"></span>`

，他們出現在devtools，但跨度在實際頁面上顯示爲0 x 0 px。如果我在mNavigation中設置背景圖像，則箭頭加載正常。這裏是我的相關代碼

CSS

/*--------------jquery custom icons--------------*/ 
.iconClosed { 
    background-image: url('/_img/mobile/mrightArrow.png') !important; 
    width: 35px; 
    height: 15px; 
    background-position: 98% 2px; 
    background-repeat: no-repeat; 
} 

.iconOpen { 
    background-image: url('/_img/mobile/mdownArrow.png') !important; 
    width: 15px; 
    height: 35px; 
    background-position: 98% 2px; 
    background-repeat: no-repeat; 
}

$(function() { 
var icons = { 
    header: "iconClosed", 
    activeHeader: "iconOpen" 
}; 
$("#accordion").accordion({ 
    icons: icons, 
    active: false, 
    collapsible: true, 
    heightStyle: "content" 
});

HTML

<div class="mNavigation"> 
      <ul id="accordion"> 
       <li> 
        <h3><a href="#">Stories</a></h3> 
         <div class ="mNavigation" id = "Foo"></div> 
       </li> 
       <li> 
        <h3><a href="#">Barristers</a></h3> 
         <div class ="mNavigation" id = "Foo"></div> 
       </li> 
       <li> 
        <h3><a href="#">Dancing in the Dark</a></h3> 
         <div class ="mNavigation" id="Foo"></div> 
       </li> 
       <li> 
        <h3><a href="#">Avocado</a></h3> 
         <div class ="mNavigation" id="Foo"></div> 
       </li> 
      </ul> 
     </div>

來源

2013-12-19 VanDanny

好，<span>標籤不會服從width或height財產，所以你需要將display:block添加到您的圖標。

.ui-accordion-header-icon { 
    display: block; 
}

它看起來像你想要你的圖標內聯，所以你應該使用display:inline-block來代替。

Here is an example

來源

2013-12-19 19:29:16

正是這樣，謝謝。我從來沒有遇到過這個問題，但是這個解決方案非常完美。 – VanDanny

jQuery UI的手風琴自定義圖標加載但在DIV

回答

相關問題