gpt4 book ai didi

javascript - jQuery Mobile 折叠 ListView ,搜索不起作用

转载 作者:行者123 更新时间:2023-11-29 16:15:14 25 4
gpt4 key购买 nike

我在 jquery 中创建了一个 ListView ,其中包含一个带有过滤器的列表分隔符。过滤器按预期工作,但一旦折叠列表分隔符中的任何一个,搜索随后就根本不起作用,

<!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/

最佳答案

使用 .toggle() 向元素添加 inline style 属性 style="display: none;"style ="显示: block ;"。 jQuery Mobile 已使用 display: block; 增强了列表项。因此,当使用 .toggle() - 当它再次可见时 - 元素将得到 display: block; 两次,内联和 CSS样式表。

要克服这个问题,请使用 .toggleClass() 类而不是内联样式。我通过添加类解决了你的问题

.hide { display: none !important; }

我将它与 .toggleClass('hide'); 一起使用

New code

使用自定义 CSS 类覆盖现有 CSS 更安全,请记住,对于 jQuery Mobile,最好以 !important 结束每个属性以强制覆盖。

关于javascript - jQuery Mobile 折叠 ListView ,搜索不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17304390/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com