listview - 带有拆分按钮的 JQuery Mobile 列表视图

Question

我正在使用 JQM listview，它工作正常，如图 1 所示 ，代码如下：

<ul data-role="listview" data-inset="true" data-split-icon="gear">
  <li>
    <a href="#">
      <h3>Button A</h3>
      <p>Button A</p>
    </a>
    <a href="#">Set Button A</a>
  </li>
  <li>
    <a href="#">
      <h3>Button B</h3>
      <p>Button B</p>
    </a>
    <a href="#">Set Button B</a>
  </li>
  <li>
    <a href="#">
      <h3>Button C</h3>
      <p>Button C</p>
    </a>
    <a href="#">Set Button C</a>
  </li>
</ul>

我正在尝试为按钮 B 和按钮 C 使用一个拆分按钮，如图 2 所示。
代码如下：

<ul data-role="listview" data-inset="true" data-split-icon="gear">
  <li>
    <a href="#">
      <h3>Button A</h3>
      <p>Button A</p>
    </a>
    <a href="#">Set Button A</a>
  </li>
  <li>
    <a href="#">
      <h3>Button B</h3>
      <p>Button B</p>
      </br>
      <h3>Button C</h3>
      <p>Button C</p>
    </a>
    <a href="#">Set Button B and C</a>
  </li>
</ul>

是否可以将“按钮 B”和“按钮 C”与图 2 中的线分开，就像图 1 中的那样，但只使用一个拆分按钮？

Answer 1

我有一个快速而肮脏的解决方案，可能适用于您的情况。将 替换</br>为

<div class="separator"></div>

样式如下：

.separator
{
    border-top: 1px solid lightgray;
    margin: 0px;
    position: relative;
    left: -50px;
    width: 200%;
}

如果列表视图是动态生成的，则必须以编程方式实现。