Question

我有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');他们两个都没有工作。第二种方法正常工作，只有点击折叠后才会显示警报展开。但是，我希望它能够根据当前月份自行扩展。

Answer 1

当前的api文档提供了新信息

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

这使得此线程中的前一个代码似乎不再起作用。

Answer 2

答案很简单，你试图扩展错误的元素，你需要扩展 data-role="collapsible" ，而你正试图在 {{1}上做到这一点}

以下是一个有效的例子：http://jsfiddle.net/Gajotres/vSjtA/

data-role="collapsible-set"

也不要使用jQuery Mobile准备好文档，它可以在一些基本情况下使用。看一下关于该主题的其他 ARTICLE 。或者找到 HERE 。只需看看第一章叫做： $（document）.on（'pageinit'）vs $（document）.ready（）

Answer 3

您需要添加

.collapsible("refresh");

毕竟

.trigger("expand");

呼叫。所以你的代码中的一个例子是：

$('#qTwoCollapsible').trigger("expand").collapsible("refresh");

以编程方式在js中展开可折叠集

3 个答案: