

Monacaで開発しています。  
`pageinit`時の`$("#id").data("collapsed",false)`は画面に反映されますが、  
`pageshow`時の`$("#id").data("collapsed",false)`は画面に反映されていないように見えます。  
原因と対処方法を教えていただきたいです。

例えば`pageshow`時の`$("#id").data("collapsed",false)`の上下を  
`console.log($("#id").data("collapsed"))`で挟むと、

[code]

    true
    false
    
[/code]

とログに出るため確かにデータは変わっているのですが、画面のコラプシブルパネルは閉じたままです。  
`pageinit`時は反映されるのに、`pageshow`時は反映されない原因が推測できません。  
何かリロードのような作業が必要になるのでしょうか。

`pageshow`の部分を`pagebeforeshow`に変更しても結果は変わりませんでした。  
`data-collapsed`を書き換えるAPIを

[code]

    $("#id").attr("data-collapsed",false);
    
[/code]

としても、やはり`pageinit`では反映されますが、`pageshow`では反映されませんでした。

**■JavaScript**

[code]

        $(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("動いてます");    //これはログに表示されるから動いてはいるようだ。
            });
        });
    
[/code]

**■HTML**

[code]

    <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>
    
[/code]


CC BY-SA 4.0
2015-10-26T22:55:26.520
18097
2019-09-09T15:02:39.860
2019-09-09T15:02:39.860
32986
12766
question
monaca jquery-mobile
pageshow時にコラプシブルパネルを開きたい


解決策を見つけました。expandで開くことができました。  
<http://demos.jquerymobile.com/1.2.0/docs/content/content-collapsible-
methods.html>


CC BY-SA 3.0
2015-10-29T23:52:44.987
18226
2015-10-29T23:52:44.987
12766
18097
answer