jQuery Mobile菜单

Aximili 发表于 Dev

阿西米利

已要求使用较旧的版本，但没有令人满意的答案。

在小屏幕上查看时，jQuery Mobile文档使用一个多级菜单面板，点击该菜单面板即可滑动。

菜单按钮在此处输入图片说明

我尝试复制代码，但这就是我得到的全部：

在此处输入图片说明

显然，您还需要在data-role="collapsible"上li使用子菜单和其他一些属性来指定，这并不是很理想。

当然，有些使用jQuery Mobile的人也需要其移动网站上的菜单。但这在文档中无处可寻。

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

奥马尔

如果您检查页面源代码，您会注意到ul面板中的s'没有，data-role="listview"并且li给出了包含子元素的s' data-role="collapsible"。

这还不是全部，可以使用以下代码mobileinit将上述uls转换为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;
}