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

Not sure if you have solved the problem. But I have something which worked for me as follows. This is my first time answering question here. I have benefited a lot from this forum, so feel should give back if I can.

This is my first time doing Jquery Mobile, so the solution may not be the best. But it works for me:

// 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 += "'> ";

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

Then, have the following code to handle the clicking of the divider to collapse and uncollapse the items under that divider:

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

Hope it helps.

于 2012-05-11T13:20:25.283 に答える