Skip to main content
 首页 » 编程设计

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

2026年07月28日7java哥

假设我有一个 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>盒子已取消

有什么想法吗?

请您参考如下方法:

好的,在研究了现有的 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/