Question

我正在使用带分频器的jQuery Mobile搜索过滤器： http://jquerymobile.com/test/docs/lists/lists-search-with-dividers.html

点击时，我需要分隔符折叠并取消折叠下方的列表项，如下面的示例所示：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 += "'> ";

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

然后，使用以下代码来处理单击分隔符以折叠和取消折叠该分隔符下的项目：

$('.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");
    }
}
});

希望它有所帮助。

jQuery Mobile Searchable List带有可折叠的分隔线？

1 个答案: