jQuery Mobile的可搜索列表与分频器也可折叠？

Question

即时通讯使用与除法的jQuery Mobile的搜索过滤器： http://jquerymobile.com/test/docs/lists/lists-search-with-dividers.html

我需要分隔在这里崩溃，点击时uncollapse它们下面的列表项，如例子：http://jquerymobile.com/test/docs/content/content-collapsible.html

我知道jQuery Mobile的可以处理可折叠div很容易，但它可以与我的列表结合，或者我需要写一些自定义jQuery来做到这一点？

Answer 1

不知道你是否已经解决了这个问题。但我有一些为我工作的东西如下。这是我第一次在这里回答问题。我从这个论坛中受益匪浅，所以觉得应该放弃，如果可以的话。

这是我第一次做Jquery Mobile，所以解决方案可能不是最好的。但它为我工作：

// Build up the divider programatically. 
var listHTML = "<ul data-role='listview' data-filter='true'"; 
listHTML += "<li data-icon='arrow-u' class='ui-btn-icon-left'>"; 
listHTML += "<a class='cl-CategoryDivider' id= 'id-Category"; 
listHTML += categoryCounter; 
listHTML += "' > "; 
listHTML += CategoryName; 
listHTML += "</a>";       
listHTML += "</li>";        

// The listview must have this class 
listHTML += "<li class='cl-Category"; 
listHTML += categoryCounter; 
listHTML += "'> "; 

....................... 

然后，让下面的代码来处理分频器的点击崩溃，uncollapse是分隔符下面的项目：

$('.cl-CategoryDivider').live ("click", function (event) 
{ 
var ID = this.id.substring(this.id.indexOf("y")+1,this.id.length); 
var $span = $(this).parents("li").find ("span.ui-icon"); 
if ($span.hasClass ("ui-icon-arrow-u")) 
{ 
    $(".cl-Category"+ID).hide(); 
    $span.removeClass ("ui-icon-arrow-u"); 
    $span.addClass ("ui-icon-arrow-d"); 
} else { 
    if ($span.hasClass ("ui-icon-arrow-d")) 
    { 
     $(".cl-Category"+ID).show(); 
     $span.removeClass ("ui-icon-arrow-d"); 
     $span.addClass ("ui-icon-arrow-u"); 
    } 
} 
}); 

希望它能帮助。