I want to open the collapsible panel during pageshow.

I'm developing it at Monaca.
$("#id").data("collapsed", false) at pageinit is reflected on the screen, but
$("#id").data("collapsed", false) at pageshow does not appear to be reflected on the screen.
Please tell me the cause and how to deal with it.

For example, $("#id").data("collapsed", false) when pageshow is
console.log($("#id").data("collapsed")") and

true
false

The data has certainly changed since it appears in the log, but the screen collapsible panel remains closed.
I can't guess why pageinit is reflected but not pageshow is reflected.
Do I need to do something like reloading?

Changing the pageshow part to pagebeforeshow did not change the result.
Data-collapsed Rewrite API

$("#id").attr("data-collapsed", false);

However, it is still reflected in pageinit but not in pageshow.

■JavaScript

$(document).on("pageinit", "#page1", function(){
        $("#collap1").data("collapsed", true);
        $("#collap2").data("collapsed", false);// This works.
            // = collap2 is open.
            // 特に There is no need for collap2 to be open, but I set it to false verification.
        $("#collap3").data("collapsed", true);

        $(document).on("pageshow", "#page2", function(){
            // Close all once
            $("#collap1").data("collapsed", true);
            $("#collap2").data("collapsed", true);
            $("#collap3").data("collapsed", true);
            // Open only the specified collapsible panel. 反映Not reflected
            $("#collap1").data("collapsed", false);
            // Check if it's bound
            console.log("It's working"); // This appears to be working because it appears in the 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>Title 1</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>Title 2</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>Title 3</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>

monaca jquery-mobile

2022-09-30 18:12

1 Answers

I found a solution.I was able to open it in expand.
http://demos.jquerymobile.com/1.2.0/docs/content/content-collapsible-methods.html

2022-09-30 18:12

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656