Fatal编程技术网
  • javascript/
  • Javascript jQuery mobile折叠列表视图，搜索不起作用

Javascript jQuery mobile折叠列表视图，搜索不起作用

javascript jquery listview dom jquery-mobile

Javascript jQuery mobile折叠列表视图，搜索不起作用,javascript,jquery,listview,dom,jquery-mobile,Javascript,Jquery,Listview,Dom,Jquery Mobile,我在jquery中创建了一个listview，它带有一个带有过滤器的ListDifferor。过滤器按预期工作，但一旦您折叠任何一个列表分隔符，随后的搜索将完全不起作用 <!DOCTYPE html> <html> <head> <title>jQuery Mobile page</title> <meta charset="utf-8" /> <meta name="viewport" content=

我在jquery中创建了一个listview，它带有一个带有过滤器的ListDifferor。过滤器按预期工作，但一旦您折叠任何一个列表分隔符，随后的搜索将完全不起作用

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


jQuery移动页面
使用
.toggle（）
向元素添加内联样式属性
style=“display:none；”
或
style=“display:block；”
。列表项已通过
display:block增强由jquerymobile编写。因此，当使用
.toggle（）
-当它再次可见时-元素将获得
显示：block两次，内联和CSS样式表

要解决此问题，请使用
.toggleClass（）
类而不是内联样式。我通过添加一个类解决了您的问题


.hide { display: none !important; }


我将它与
.toggleClass（'hide'）一起使用




使用自定义CSS类覆盖现有CSS更安全，请记住，对于jQuery Mobile，最好以
结束每个属性！重要信息
强制覆盖。
谢谢兄弟，你的修复效果非常好：），我已经为此奋斗了将近一个星期了，如果我能投票1000次，我会的。在listview中显示/隐藏项目时使用类.show/.hide的概念不再破坏我的搜索。谢谢