Jquery UI Accordion 自定义图标加载但未出现在 div 中

Question

我在让我的 Accordion 中的自定义图标出现在页面上时遇到问题，它们加载，它们从

切换 onclick

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

，它们出现在 devtools 中，但 span 在实际页面上将它们显示为 0 x 0 像素。如果我在 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;
}  

JS

$(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>

Answer 1

嗯，<span>标签不会服从 width或 height属性，因此您需要添加 display:block到您的图标。

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

看起来你希望你的图标是内联的，所以你应该使用 display:inline-block相反。

Here is an example