jQuery mobile折叠列表视图，搜索不起作用
Posted
技术标签:
【中文标题】jQuery mobile折叠列表视图，搜索不起作用【英文标题】：jQuery mobile collapsed list view with search not working 【发布时间】：2013-06-22 15:59:57 【问题描述】：我在 jquery 中创建了一个带有过滤器的 listdivider 的列表视图。过滤器按预期工作，但只要您折叠任何一个列表分隔线，搜索随后就根本不起作用，
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile page</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=" <link rel="stylesheet" href="<%=request.getContextPath()%>/css/mobile/jquery.mobile.structure-1.3.1.min.css" />
<script src="<%=request.getContextPath()%>/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
jQuery(document).bind("mobileinit", function ()
jQuery.mobile.ajaxEnabled = false;
);
</script>
<script src="<%=request.getContextPath()%>/js/mobile/jquery.mobile-1.3.1.min.js"></script>
<script>
var hide=0;
var dpwClone='';
$(function()
$('[data-role="list-divider"]').click(function(element)
$(this).nextUntil('[data-role="list-divider"]').toggle();
$("#eServiceList").listview("refresh");
// $(this).nextUntil('[data-role="list-divider"]').toggle();
);
$( "#eServiceList" ).listview( "option", "filterCallback", searchList);
function searchList( text, searchValue, item )
var result = text.toString().toLowerCase().indexOf( searchValue.toString().toLowerCase() );
var show = false;
var hide = true;
if (result == -1 )
return hide;
return show;
;
);
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Problem nested list views</h1>
</div>
<div data-role="content">
<div class="content-primary">
<ul data-role="listview" data-inset="true" data-divider-theme="d" data-filter="true" id="eServiceList">
<li data-role="list-divider" id="dpw" >
DPW
</li>
<li><a href="#" class="dpw">Inbox</a></li>
<li><a href="#" class="dpw">Outbox</a></li>
<li data-role="list-divider" id="custo">
Customs
</li>
<li><a href="#" class="custo">Friends</a></li>
<li><a href="#" class="custo">Work</a></li>
</ul>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
下面是 JSfiddle 链接。
http://jsfiddle.net/jsfiddle_one/R8pZH/
【问题讨论】：
【参考方案1】：使用.toggle() 向元素添加内联样式 属性style="display: none;" 或style="display: block;"。 jQuery Mobile 已经使用display: block; 增强了列表项。因此，当使用 .toggle() - 当它再次可见时 - 元素将获得两次 display: block;，内联和 CSS 样式表。
要解决这个问题，请使用.toggleClass() 类而不是内联样式。我通过添加一个类解决了你的问题
.hide display: none !important;
我将它与.toggleClass('hide');一起使用
New code
使用自定义 CSS 类覆盖现有 CSS 更安全，请记住，对于 jQuery Mobile，最好以 !important 结束每个属性以强制覆盖。
【讨论】：
感谢兄弟你的修复工作就像一个魅力:)，我已经为此苦苦挣扎了将近一个星期 如果我可以投票 1000 次，我会的。在列表视图中显示/隐藏项目时使用类而不是 .show /.hide 的概念不再破坏我的搜索。谢谢。以上是关于jQuery mobile折叠列表视图，搜索不起作用的主要内容，如果未能解决你的问题，请参考以下文章
jQuery Mobile：在列表视图数据拆分图标上更改/切换主题