複数の国を (セットではなく) 折りたたみ可能なものとして指定し、それぞれの国にいくつかの折りたたみ可能なセットを含む折りたたみ可能なセットを含めます。マークアップは次のようになります。
<div data-role="content">
<div data-role="collapsible" data-iconpos="left" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" class="col" >
<h3 ><div>Country 1</div></h3>
<div data-role="collapsible-set" data-iconpos="left" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" class="governorates">
<div data-role="collapsible" >
<h3 class="Mycollapsible"><div style="color:white;font-weight:normal;">Governorate1</div></h3>
<ul data-role="listview">
<li data-icon='false'> <font class="NameStyle">Village1</font></li>
<li data-icon='false'> <font class="NameStyle"> Village2</font></li>
<li data-icon='false'> <font class="NameStyle"> Village3</font></li>
<li data-icon='false'> <font class="NameStyle"> Village4</font></li>
<li data-icon='false'> <font class="NameStyle"> Village5</font></li>
</ul>
</div>
<div data-role="collapsible">
<h3 class="Mycollapsible"><div style="color:white;font-weight:normal;" >Governorate2</div></h3>
<ul data-role="listview">
<li data-icon='false'> <font class="NameStyle">Village1</font> </li>
<li data-icon='false'> <font class="NameStyle"> Village2</font></li>
<li data-icon='false'> <font class="NameStyle"> Village3</font></li>
<li data-icon='false'> <font class="NameStyle"> Village4</font></li>
<li data-icon='false'> <font class="NameStyle"> Village5</font></li>
</ul>
</div>
</div>
</div>
<div data-role="collapsible" data-iconpos="left" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" class="col" >
<h3 ><div>Country 2</div></h3>
<div data-role="collapsible-set" data-iconpos="left" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" class="governorates">
<div data-role="collapsible" >
<h3 class="Mycollapsible"><div style="color:white;font-weight:normal;">Governorate1</div></h3>
<ul data-role="listview">
<li data-icon='false'> <font class="NameStyle">Village1</font></li>
<li data-icon='false'> <font class="NameStyle"> Village2</font></li>
<li data-icon='false'> <font class="NameStyle"> Village3</font></li>
<li data-icon='false'> <font class="NameStyle"> Village4</font></li>
<li data-icon='false'> <font class="NameStyle"> Village5</font></li>
</ul>
</div>
<div data-role="collapsible">
<h3 class="Mycollapsible"><div style="color:white;font-weight:normal;" >Governorate2</div></h3>
<ul data-role="listview">
<li data-icon='false'> <font class="NameStyle">Village1</font> </li>
<li data-icon='false'> <font class="NameStyle"> Village2</font></li>
<li data-icon='false'> <font class="NameStyle"> Village3</font></li>
<li data-icon='false'> <font class="NameStyle"> Village4</font></li>
<li data-icon='false'> <font class="NameStyle"> Village5</font></li>
</ul>
</div>
</div>
</div>
</div>
JavaScript では、折りたたみ可能なセットにクラスを追加することで、第 2 レベルの折りたたみ可能なセットとは別に国の展開/折りたたみを処理.governorates
します。
$(document).on('pagecreate', function () {
$(".governorates .ui-collapsible-heading-toggle").on("click", function (e) {
var current = $(this).closest(".ui-collapsible");
if (current.hasClass("ui-collapsible-collapsed")) {
$(".ui-collapsible-content", current).slideDown("fast", function () {
current.trigger("collapsibleexpand");
//hide previously expanded
$(".governorates .ui-collapsible-content-collapsed").slideUp('fast');
});
} else {
$(".ui-collapsible-content", current).slideUp("fast", function () {
current.trigger("collapsiblecollapse");
});
}
});
$(".col .ui-collapsible-heading-toggle").not(".governorates .ui-collapsible-heading-toggle").on("click", function (e) {
var current = $(this).closest(".ui-collapsible");
if (current.hasClass("ui-collapsible-collapsed")) {
$(".ui-collapsible-content", current).not(".governorates .ui-collapsible-content").slideDown("fast", function () {
current.trigger("collapsibleexpand");
});
} else {
$(".ui-collapsible-content", current).not(".governorates .ui-collapsible-content").slideUp("fast", function () {
current.trigger("collapsiblecollapse");
});
}
});
});
ここに動作するデモがあります (OP コメント スレッドでの Omar の最初の作業に基づいています)。