0

我使用带有分隔符的 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 来做到这一点？

4

1 回答 1

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");
    }
}
});

希望能帮助到你。

于 2012-05-11T13:20:25.283 回答