Question

我在jquery中使用带有过滤器的listdivider创建了一个listview。过滤器按预期工作，但一旦折叠任何列表分隔符，搜索随后根本不起作用，下面是JSfiddle链接，请尽快帮助，我一直在尝试这个。

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

http://jsfiddle.net/jsfiddle_one/R8pZH/

Answer 1

使用.toggle()为元素添加内嵌样式属性style="display: none;"或style="display: block;"。 jQuery Mobile已使用display: block;增强了列表项。因此，当再次看到<{1}} - 时使用 - 该元素将获得.toggle()两次，内联和CSS样式表。

要解决此问题，请使用display: block;类而不是内联样式。我通过添加一个类来修复你的问题

.toggleClass()

我将其用于.hide { display: none !important; }

<强> New code

使用自定义CSS类来覆盖现有的CSS更安全，请记住，对于jQuery Mobile，最好使用.toggleClass('hide');结束每个属性以强制覆盖。

Jquery移动折叠列表视图，搜索无法正常工作

1 个答案: