2

私は 4 つの折りたたみ可能なセットを持っています。1 年の各四半期に 1 つの折りたたみ可能なセットです。現在の月によると、対応する折りたたみ可能ファイルはドキュメントの準備ができたときに展開する必要があります。ただし、これは機能していません。

<script type="text/javascript">

    $(document).ready
    (
        function()
        {

            var today=new Date();
            var month=today.getMonth()+1;
            alert(month);

            if(month>9)
            {
                $('#qFourCollapsible').trigger("expand");
            }
            else if(month>6)
            {
                $('#qThreeCollapsible').trigger("expand");
            }
            else if(month>3)
            {
                $('#qTwoCollapsible').trigger("expand");
            }
            else
            {
               alert("in else");
               $('#qOneCollapsible').bind("expand", function () {
                       alert('Expanded');
                       });
            }



        }


    );
    </script>

<html>
<div data-role="collapsible-set" data-theme="b" data-content-theme="c" data-collapsed="false" id="qOneCollapsible">
                <div data-role="collapsible">
                    <h2>January-March</h2>

                    <table id="quarterOneTable">
                    </table>
                </div>
            </div>
            <div data-role="collapsible-set" data-theme="b" data-content-theme="d" id="qTwoCollapsible">
                <div data-role="collapsible">
                    <h2>April-June</h2>

                    <table id="quarterTwoTable">
                    </table>
                </div>
            </div>
            <div data-role="collapsible-set" data-theme="b" data-content-theme="c" id="qThreeCollapsible">
                <div data-role="collapsible">
                    <h2>July-September</h2>

                    <table id="quarterThreeTable">
                    </table>
                </div>
            </div>
            <div data-role="collapsible-set" data-theme="b" data-content-theme="d" id="qFourCollapsible">
                <div data-role="collapsible">
                    <h2>October-December</h2>

                    <table id="quarterFourTable">
                    </table>

                </div>
            </div>  
</html>

ご覧のとおり、折りたたみ式を 2 つの方法で拡張してみました。1: $('#qFourCollapsible').trigger("expand"); 2: $('#qOneCollapsible').bind("expand", function () { alert('Expanded');どちらも機能していません。2番目の方法は機能しており、展開されたアラートは折りたたみ可能なものをクリックしたときにのみ表示されます。ただし、現在の月に応じてそれ自体を拡張したいと考えています。

4

3 に答える 3

6

現在の API ドキュメントは新しい情報を提供します

$("#resCollapsable").collapsible("expand");

これは機能します このスレッドの以前のコードは機能しなくなったようです。

于 2015-04-02T00:21:19.443 に答える
2

答えは簡単です。間違った要素を展開data-role="collapsible"しようとしています。展開する必要があり、data-role="collapsible-set".

これが実際の例です: http://jsfiddle.net/Gajotres/vSjtA/

$(document).on('pagebeforeshow', '#index', function(){       
    $( "#qOneCollapsible-inner" ).trigger( "expand" );
    $( "#qThreeCollapsible-inner" ).trigger( "expand" );    
});

また、jQuery Mobile で準備されたドキュメントを使用しないでください。いくつかの基本的なケースでは機能します。そのトピックに関する私の他の記事を見てください。または、こちらをご覧ください。$(document).on('pageinit') vs $(document).ready()という最初の章を見てください。

于 2013-02-20T14:15:39.283 に答える
1

追加する必要があります

.collapsible("refresh");

結局

.trigger("expand");

呼び出します。したがって、コードの例は次のようになります。

$('#qTwoCollapsible').trigger("expand").collapsible("refresh");
于 2013-02-20T05:51:45.573 に答える