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

jQuery mobile collapsed list view with search not working

本文关键字：搜索 不起作用 视图 列表 mobile 折叠 jQuery      更新时间：2023-09-26

我在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/

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

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

.hide { display: none !important; }

我把它和.toggleClass('hide'); 一起使用

新代码

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

相关文章：