面板内的 JQuery Mobile 列表视图答案

【问题标题】：JQuery Mobile listview inside a panel面板内的 JQuery Mobile 列表视图
【发布时间】：2015-09-02 16:20:03
【问题描述】：

我正在尝试在面板中使用带有可折叠项目的列表视图，但我得到了奇怪的结果。具体来说，这是我正在使用的最小代码。请注意，列表视图中的所有内容均取自 JQuery Mobile 示例，因此我希望它能够开箱即用。

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
<h1></h1>

<div data-role="page" id="mainpage">

<div data-role="panel" id="leftpanel" data-position="left" data-display="push">
  <!-- panel content goes here -->
  <div data-role="tabs" id="tabs">
  <div data-role="navbar">
    <ul>
      <li><a href="#one-tab" data-ajax="false">one</a></li>
      <li><a href="#two-tab" data-ajax="false">two</a></li>
    </ul>
  </div>
  <div id="one-tab" class="ui-body-d ui-content">
    Empty one!
  </div>
  <div id="two-tab" class="ui-body-d ui-content">
    <ul data-role="listview" data-inset="true" data-shadow="false">
      <li data-role="collapsible" data-iconpos="right" data-inset="false">
      <h2>Birds</h2>
      <ul data-role="listview" data-theme="b">
        <li><a href=“#">Condor</a></li>
        <li><a href="#">Eagle</a></li>
        <li><a href="#">Sparrow</a></li>
      </ul>
      </li>
      <li><a href="#">Humans</a></li>
      <li data-role="collapsible" data-iconpos="right" data-inset="false">
      <h2>Fish</h2>
      <ul data-role="listview" data-theme="b">
        <li><a href="#">Salmon</a></li>
        <li><a href="#">Pollock</a></li>
        <li><a href="#">Trout</a></li>
      </ul>
      </li>
    </ul>
  </div>
  </div>
  </div>

  <div id="mainheader" data-role="header" data-position="fixed">
    <a href="#leftpanel" data-role="button" data-iconpos="notext" data-icon="bars"></a>
    <h1>Main page</h1>
  </div>

  Main page
  </div>  
  </body>
</html>

我得到的是类似的东西

这可以说是不完全正确的。我做错了什么？

【问题讨论】：

标签： jquery-mobile jquery-mobile-listview jquery-mobile-collapsible jquery-mobile-panel

【解决方案1】：

您正在以 jQM 无法处理的方式混合列表视图和可折叠视图。但是，您可以使用一些 CSS 使这看起来“正确”。

<ul id="tabTwoList" data-role="listview" data-inset="true" data-shadow="false">
    <li>
        <div data-role="collapsible" data-inset="false" data-iconpos="right">
            <h2>Birds</h2>
            <ul data-role="listview" data-theme="b">
                <li><a href="#">Condor</a></li>
                <li><a href="#">Eagle</a></li>
                <li><a href="#">Sparrow</a></li>
            </ul>
        </div>
    </li>
    <li><a href="#">Humans</a></li>
    <li>
        <div data-role="collapsible" data-inset="false" data-iconpos="right">
            <h2>Fish</h2>
            <ul data-role="listview" data-theme="b">
                <li><a href="#">Salmon</a></li>
                <li><a href="#">Pollock</a></li>
                <li><a href="#">Trout</a></li>
            </ul>
        </div>
    </li>
</ul>

在标记中，我为列表提供了一个 ID，以便我们可以在 CSS 中轻松引用它，并且我在 LI 中创建了可折叠 DIV。现在我们使用 CSS 移除一些 padding/margins/borders 以使所有项目排列整齐：

#tabTwoList li.ui-li-static {
    padding-top: 0;
    padding-bottom: 0;
}
#tabTwoList li .ui-collapsible-heading {
    margin-top: 0;
    margin-bottom: 0;
}
#tabTwoList li .ui-collapsible-heading-toggle {
    border: 0;
}

工作DEMO

【讨论】：

太好了，非常感谢。所以基本上我错过了我猜的 CSS 样式……