主菜单上没有链接的jQuery Mobile List项目分割按钮

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>后面的链接以及{{1} }框已取消

有什么想法吗？

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; }

然后，设置<li>：

<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();

和Voila：http://jsfiddle.net/Zwhs3/2/