Question

我遇到一个问题，让我的手风琴中的自定义图标显示在页面上，然后加载，它们从

开始切换

<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;
}

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

Jquery UI手风琴自定义图标加载但不出现在div中

1 个答案: