5

假设我有一个 jQuery Mobile 站点，其中<li>包含一个拆分图标 ( data-icon="grid")。

是否可以将列表项的左侧不包裹在 a 中，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>

有任何想法吗？

4

1 回答 1

1

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

.ui-li .ui-btn-text span .ui-link-inherit { text-overflow: ellipsis; 溢出：隐藏；空白：nowrap；}
.ui-li .ui-btn-inner span .ui-link-inherit { padding: .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/

于 2012-05-31T03:05:08.897 回答