jQuery 移动 - 不可折叠 collapsing/showing

Question

所以我正在尝试创建一个可以通过单击 link 来触发的菜单。唯一的问题是我的菜单中的子菜单没有折叠。它甚至不会显示菜单项。

我创建了一个 jsFiddle 来显示我的问题，但我不知道发生了什么。 "data-role='collapsible'" 似乎根本不起作用。

jsFiddle：Demo`

<div data-role="page" id="wrapper" data-url="wrapper" class="ui-content">
    <div role="header">
        <a href="#menu" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu</a>
    </div>
    <div role="main" class="ui-content">
<div data-role="panel" id="menu" data-position="left" data-display="overlay" data-theme="a" class="ui-panel ui-panel-position-left ui-panel-display-overlay ui-body-a ui-panel-animate ui-panel-open">
                <ul data-role="listview">
                    <li data-icon="delete">Home</li>
                    <li data-role="list-divider">Skills</li>
                    <li data-role="collapsible">Hello
                        <ul>
                            <li>Beautiful</li>
                            <li>World</li>
                        </ul>
                   </li>
                    <li>About</li>
                </ul>
            </div>
        </div>

    </div>

带 "Hello" 的菜单项根本不显示，子项也不会折叠。我做错了什么或导致失败的原因是什么？

Answer 1

根据 Jquery 文档

To create a collapsible block of content, create a container and add the data-role="collapsible" attribute.Directly inside this container, add any header (H1-H6) or legend element. The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.

所以在你的情况下，

<div data-role="page" id="wrapper" data-url="wrapper" class="ui-content">
    <div role="header">
        <a href="#menu" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu</a>
    </div>
    <div role="main" class="ui-content">
<div data-role="panel" id="menu" data-position="left" data-display="overlay" data-theme="a" class="ui-panel ui-panel-position-left ui-panel-display-overlay ui-body-a ui-panel-animate ui-panel-open">
                <ul data-role="listview">
                    <li data-icon="delete">Home</li>
                    <li data-role="list-divider">Skills</li>
                    <li data-role="collapsible"><h2>Hello</h2>
                        <ul>
                            <li>Beautiful</li>
                            <li>World</li>
                        </ul>
                   </li>
                    <li>About</li>
                </ul>
            </div>
        </div>

    </div>

JSFIDDLE

jQuery 移动 - 不可折叠 collapsing/showing

jQuery Mobile - Collapsible not collapsing/showing

html

javascript

jquery

jquery-mobile