pageshow時にコラプシブルパネルを開きたい
Monacaで開発しています。
pageinit
時の$("#id").data("collapsed",false)
は画面に反映されますが、
pageshow
時の$("#id").data("collapsed",false)
は画面に反映されていないように見えます。
原因と対処方法を教えていただきたいです。
例えばpageshow
時の$("#id").data("collapsed",false)
の上下を
console.log($("#id").data("collapsed"))
で挟むと、
true
false
とログに出るため確かにデータは変わっているのですが、画面のコラプシブルパネルは閉じたままです。
pageinit
時は反映されるのに、pageshow
時は反映されない原因が推測できません。
何かリロードのような作業が必要になるのでしょうか。
pageshow
の部分をpagebeforeshow
に変更しても結果は変わりませんでした。
data-collapsed
を書き換えるAPIを
$("#id").attr("data-collapsed",false);
としても、やはりpageinit
では反映されますが、pageshow
では反映されませんでした。
■JavaScript
$(document).on("pageinit","#page1",function(){
$("#collap1").data("collapsed",true);
$("#collap2").data("collapsed",false); //これは動く。
//=collap2が開いた状態になる。
//※特にcollap2が開いている必要は無いが検証のためfalseにした。
$("#collap3").data("collapsed",true);
$(document).on("pageshow","#page2",function(){
//一旦全部閉じる
$("#collap1").data("collapsed",true);
$("#collap2").data("collapsed",true);
$("#collap3").data("collapsed",true);
//指定のコラプシブルパネルだけ開く。 ※反映されない
$("#collap1").data("collapsed",false);
//バインドされているのか確認
console.log("動いてます"); //これはログに表示されるから動いてはいるようだ。
});
});
■HTML
<div data-role="page" id="page1">
<div data-role="content">
<a href="#page2>Link1</a>
</div>
</div
<div data-role="page" id="page2">
<div data-role="ui-content">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="true" id="collap1">
<h3>Title1</h3>
<ul data-role="listview">
<li><a href="#page1">content1</a></li>
<li><a href="#page1">content2</a></li>
<li><a href="#page1">content3</a></li>
</ul>
</div>
<div data-role="collapsible" data-collapsed="true" id="collap2">
<h3>Title2</h3>
<ul data-role="listview">
<li><a href="#page1">content4</a></li>
<li><a href="#page1">content5</a></li>
<li><a href="#page1">content6</a></li>
</ul>
</div>
<div data-role="collapsible" data-collapsed="true" id="collap3">
<h3>Title3</h3>
<ul data-role="listview">
<li><a href="#page1">content7</a></li>
<li><a href="#page1">content8</a></li>
<li><a href="#page1">content9</a></li>
</ul>
</div>
</div>
</div>
</div>