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

Question

假设我有一个<li>带有分割图标的jQuery Mobile网站(data-icon="grid").

是否可以将列表项的左侧没有包裹在一个href但是将按钮保留在右侧？

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

我试过了:

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

这工作,它删除了所请求的链接(并修复了我在下面概述的问题),但它打破了一大堆布局和样式列表项.

我试图解决的问题是:

• 我<li>在页面上有大约100个项目
• 每个<li>可能都有一个<select>元素,有5-10个选项.
• 当使用默认的jQuery Mobile样式时,<select>一切正常
• 然而,这对性能有重大影响.iPhone 4S难以滚动,iPad 2几乎不可用(Android实际上更好一次,但仍然不完美)
• 把data-role="none"对<select>元素使得页面快速,可行的再次
• 但是,它会在桌面浏览器(特别是Firefox)上中断,因为当您单击以选择其中的项目时<select>,<select>会触发后面的链接并<select>取消该框

有任何想法吗？

Answer 1

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

.ui-li .ui-btn-text span .ui-link-inherit { 文本溢出：省略号；溢出：隐藏；空白：nowrap；}
.ui-li .ui-btn-inner span .ui-link-inherit { 填充： .7em 15px .7em 15px; 显示：块；}

然后，设置<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();

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