Jquery mobile jQuery移动菜单

这是一个令人满意的答案

在小屏幕上查看时，使用一个多级菜单面板，点击时可滑入

我试着复制代码，但我得到的只有这些：

显然，您还需要在带有子菜单的

li

s上指定

data role=“collapsable”

，以及一些其他属性，这并不是很理想

当然，也有使用jQuery手机的人需要手机网站上的菜单。但文件中没有这一点

有人知道如何在不重新发明轮子的情况下做到这一点吗？
或者jQuery Mobile在没有手动编码的情况下根本不支持这种菜单吗？

如果您检查页面源代码，您会注意到面板中的

ul

s'没有

data role=“listview”

，并且包含子元素的

li

s'是给定的

data role=“collapsable”

还有，在

mobileinit

事件中，前面提到的

ul

s'使用以下代码转换为listview

$(".jqm-navmenu-panel ul").listview();

此外，所有面板元素上的

padding

和

margin

都被删除/修改，以使它们彼此粘在一起

.jqm-navmenu-panel .ui-listview > li .ui-collapsible-heading {
  margin: 0;
}

.jqm-navmenu-panel .ui-collapsible.ui-li-static {
  padding: 0;
  border: none !important;
}

.jqm-navmenu-panel .ui-collapsible + li > .ui-btn,
.jqm-navmenu-panel .ui-collapsible + .ui-collapsible > .ui-collapsible-heading > .ui-btn,
.jqm-navmenu-panel .ui-panel-inner > .ui-listview > li.ui-first-child .ui-btn {
  border-top: none !important;
}

.jqm-navmenu-panel .ui-listview .ui-listview .ui-btn {
  padding-left: 1.5em;
  color: #999;
}

.jqm-navmenu-panel .ui-listview .ui-listview .ui-btn.ui-btn-active {
  color: #fff;
}

.jqm-navmenu-panel .ui-btn:after {
  opacity: .4;
  filter: Alpha(Opacity=40);
}

.jqm-navmenu-panel ul li:first-child a{
  border-top: none;
}

---

哇，你真棒！太糟糕了，jQuery Mobile没有成为框架的一部分。@aximili不客气！通常在jQM中，您需要做一些CSS工作来获得所需的外观，因此您需要习惯它；）