jQuery Mobile 列表项拆分按钮，主项上没有链接

Question

假设我有一个 jQuery Mobile 网站，其中有一堆 <li>带有分割图标 ( data-icon="grid" )。

列表项的左侧是否可以不包含在 href 中但将按钮保留在右侧？

示例:http://jsfiddle.net/SSQMB/

我已经尝试过:

$(selection).contents().unwrap();

这有效，它按要求删除了链接(并修复了我在下面概述的问题)，但它破坏了列表项上的一大堆布局和样式。

我试图解决的问题是:

• 我有大约 100 <li>页面上的项目
• 每个<li>可能有 <select>其中包含 5-10 个选项的元素。
• 使用 <select> 的默认 jQuery Mobile 样式时一切正常
• 但是，这会对性能造成重大影响。 iPhone 4S 很难滚动，而 iPad 2 几乎无法使用(Android 实际上曾经更好，但仍然不完美)
• 推杆data-role="none"关于<select>元素使页面再次快速且可用
• 但是，它在桌面浏览器(尤其是 Firefox)上会崩溃，因为当您单击 <select> 中的项目时，它会崩溃。 ，后面的链接<select>被触发并且 <select>盒子已取消

有什么想法吗？

Answer 1

好的，在研究了现有的 jQuery Mobile CSS 后，我找到了确定 <li> 格式的样式。 。我将它们复制到一个单独的样式表中，并将它们应用于 <span>而不是<a> :

.ui-li .ui-btn-text span.ui-link-inherit { text-overflow: ellipsis; overflow: hidden; white-space: nowrap;  }.ui-li .ui-btn-inner span.ui-link-inherit { padding: .7em 15px .7em 15px; display: block; }

Then, set up the <li> as such:

<li data-icon="grid">
  <a href="#" onclick="return false;" class="leftLink">
    <span class="ui-link-inherit">
      .... content ....
    </span>
  </a><a href="#"> ... </a>
</li>

然后是一些 jQuery:

$('.leftLink').parent().parent().parent().removeClass('ui-btn');
$('.leftLink').contents().unwrap();

瞧:http://jsfiddle.net/Zwhs3/2/