jquery mobile外部面板中的可折叠列表视图无法正确显示

Posted 2023-05-09

【中文标题】jquery mobile外部面板中的可折叠列表视图无法正确显示

【英文标题】：Collapsible listview in a jquery mobile external panel not displaying correctly

【发布时间】：2014-01-11 23:13:12

【问题描述】：

谁能帮帮我？

我正在尝试在外部 jquery 移动面板中创建一个菜单。这是支持外部面板的 JQM 1.4.0。

我在外部面板中有一个可折叠的列表视图。应用了某种插图，我似乎无法摆脱 submenu3 及其内部的内容。

请查看我的小提琴：http://jsfiddle.net/UHYz9/2/

这是html：

<div data-role="page" class="jqm-demos" data-quicklinks="true">
    <div data-role="header">
        <h1>External panels</h1>
    </div>
    <div role="main" class="ui-content jqm-content jqm-fullwidth">
        <a href="#externalpanel" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini">Open External Panel</a>
    </div>
</div>
<div data-role="panel" id="externalpanel" data-position="left" data-display="reveal" data-theme="a">
<h3>Menu</h3>
        <ul data-role="listview" style="padding-right: 8px">
      <li><a href="#">Submenu 1</a></li>
      <li><a href="#">Submenu 2</a></li>
      <li data-role="collapsible" data-iconpos="right" data-inset="false">
        <h2>Submenu 3</h2>
        <ul data-role="listview">
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Submenu 4</a></li>
      <li><a href="#">Submenu 5</a></li>
    </ul>
</div>

这是 js：

$(function() 
    $("body>[data-role='panel']").panel();
    $("#externalpanel ul").listview();
    $("#externalpanel").trigger("create");
);

为此，请包含以下 css 和 js 链接：

http://demos.jquerymobile.com/1.4.0/css/themes/default/jquery.mobile-1.4.0.min.css

http://demos.jquerymobile.com/1.4.0/js/jquery.js

http://demos.jquerymobile.com/1.4.0/js/jquery.mobile-1.4.0.min.js

非常感谢！

【参考方案1】：

您需要将面板上的内容包装在<div data-role="content">或`中。

要增强面板或任何其他 div 的内容，请使用 .enhanceWithin()。

$(function () 
 $("body>[data-role='panel']").panel().enhanceWithin();
);

Demo

【讨论】：

不幸的是，这不起作用：子菜单 3 中仍然有不需要的缩进，并且在 item1 之前的顶部、底部和内部都有间距。

@Omar 而不是可折叠的，是否可以使用香草 jquery 使其成为多级菜单？

@Shouvik 嗨，我没有使用过 vanilla，但一切皆有可能。请发布带有相关数据的问题:)

@Omar ***.com/questions/20889575/…