2

我有 4 个可折叠套装：一年中每个季度都有 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>

因此，如您所见，我尝试以两种方式扩展可折叠设备。1: $('#qFourCollapsible').trigger("expand"); 2: $('#qOneCollapsible').bind("expand", function () { alert('Expanded');他们两个都不工作。第二种方法正在工作，并且仅在单击可折叠时才显示警报扩展。但是，我希望它根据当前月份自行扩展。

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 回答