Question

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

我创建了一个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文档

要创建可折叠的内容块，请创建容器并添加 data-role =“collapsible”属性。直接在这个容器里面，添加任何标题（H1-H6）或图例元素。框架将风格化标题看起来像一个可点击的按钮，并在左侧添加一个“+”图标表明它是可扩展的。

所以在你的情况下，

<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 Mobile - 可折叠不折叠/显示

1 个答案: