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

Question

我正在使用 JQM 列表视图，它可以像 Fig. 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 使用一个拆分按钮，例如 Fig. 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%;
}

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