Question

         <div class="ui-block-a" data-role="collapsible"  data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
            <h3>collapsible</h3>
            <p>This ddis a way.</p>
        </div>

我正在使用jquery mobiles 1.4.2我希望你在展开和折叠时使用我自己的图像进行折叠。我想删除边框。

Answer 1

您可以通过CSS（http://demos.jquerymobile.com/1.4.2/icons/）将自己的自定义图标添加到jQuery Mobile：

用您要使用的图标名称替换myicon。

.ui-icon-myicon:after {
    background-image: url("iconimg.svg");
}
/* Fallback */
.ui-nosvg .ui-icon-myicon:after {
    background-image: url("iconimg.png");
}

然后在折叠中，您可以使用data-collapsed-icon和data-expanded-icon并将它们分配给您创建的图标。

从内容中删除边框：

.ui-collapsible-content{
    border: 0 !important;
}

从标题中删除边框：

.ui-collapsible-heading a {
    border: 0 !important;
}

如果你想要一个没有磁盘的普通图标，可以将类ui-alt-icon和ui-nodisc-icon添加到可折叠的div中。

如何更改图像以进行折叠？

1 个答案: