javascript - jquery mobile listview 不像演示页面那样工作

Question

ic 复制了此页面第二个 ListView 的源代码:

http://demos.jquerymobile.com/1.4.1/listview-collapsible-item-flat/

<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>
  <li data-role="collapsible" data-iconpos="right" data-inset="false">
    <h2>Choose your preference</h2>
    <form>
      <fieldset data-role="controlgroup" data-type="horizontal">
        <label>Birds<input type="checkbox" id="choose-birds-inset"></label>
        <label>Humans<input type="checkbox" id="choose-humans-inset"></label>
        <label>Fish<input type="checkbox" id="choose-fish-inset"></label>
      </fieldset>
    </form>
  </li>
</ul>

我使用此代码在我的 head 部分中使用 jquery:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />

并且该列表看起来不像演示。

JSFIDDLE 上也是如此:

http://fiddle.jshell.net/7uSAP/

Answer 1

你错过了一些 css 规则，仅此而已:

.ui-li-static.ui-collapsible > .ui-collapsible-heading {
        margin: 0;
    }

    .ui-li-static.ui-collapsible {
        padding: 0;
    }

    .ui-li-static.ui-collapsible > .ui-collapsible-heading > .ui-btn {
        border-top-width: 0;
    }

    .ui-li-static.ui-collapsible > .ui-collapsible-heading.ui-collapsible-heading-collapsed > .ui-btn,
    .ui-li-static.ui-collapsible > .ui-collapsible-content {
        border-bottom-width: 0;
    }

工作 fiddle :http://jsfiddle.net/robertrozas/FLLfz/