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

Question

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

jav*_*ser 2 javascript jquery listview dom jquery-mobile

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Oma*_*mar 6

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

要解决此问题,请使用.toggleClass()类而不是内联样式.我通过添加一个类修复了你的问题

.hide { display: none !important; }

Run Code Online (Sandbox Code Playgroud)

我用它 .toggleClass('hide');

新代码

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

如果我可以投票1000次,我愿意.在列表视图中显示/隐藏项目时使用类而不是.show/.hide的概念不再破坏我的搜索.谢谢. (2认同)

归档时间：	12 年，5 月前
查看次数：	1201 次
最近记录：	6 年，4 月前