增加可折叠内容的大小

Question

我正在尝试创建一个小按钮（一个选项按钮），单击它会打开一个选项菜单。但是，未折叠时内容的大小与按钮的大小相同我正在尝试增加 li 的大小。我已经在我的样式中添加了这个来设置按钮的宽度。我希望按钮的大小合理，可以打开更大的内容。

如何在不更改文档中所有 li 的情况下增加 div 中 LI 的大小。

.ui-collapsible {
            width:130px;
        }

<div data-role="collapsible" data-collapsed-icon="gear" data-expanded-icon="gear">
            <h4>Options</h4>
            <ul data-role="listview" data-inset="false">
                    <li>Read-only list item 1</li>
                    <li>Read-only list item 2</li>
                    <li>Read-only list item 3</li>
            </ul>
        </div>

Answer 1

可折叠小部件并不是真正为此设计的。我认为你最好使用 popup:

<a href="#myMenu" data-rel="popup" data-transition="slideup" class="ui-btn ui-btn-inline ui-icon-gear ui-btn-icon-left">Options</a>
<div data-role="popup" id="myMenu">
         <h4>Options</h4>
        <ul data-role="listview" data-inset="false">
                <li>Read-only list item 1</li>
                <li>Read-only list item 2</li>
                <li>Read-only list item 3</li>
        </ul>
</div>

DEMO

增加可折叠内容的大小

Increase collapsible content size

jquery

jquery-mobile

jquery-mobile-collapsible