在js中用程序扩展一个可折叠的集合

Expand a collapsible set programatically in js

本文关键字：一个 可折叠 集合 js 程序扩展      更新时间：2023-09-26

我有4套可折叠套装：一年中每个季度一套可折叠。根据当前月份，相应的可折叠应在文档准备就绪时展开。然而，这并没有发挥作用。

<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');两个都不工作。第二种方法正在工作，并且只有在单击可折叠时才会显示展开的警报。然而，我希望它能根据当前月份自行扩展。

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

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

这就起作用了——这个线程中以前的代码似乎不再起作用了。

答案很简单，您试图扩展错误的元素，您需要扩展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" );    
});

另外，不要在jQueryMobile中使用文档就绪，它在一些基本情况下会起作用。看看我关于该主题的另一篇文章。或者在这里找到它。看看第一章：$（document）.on（'pageinit'）vs$（document）.ready（）

您需要添加

.collapsible("refresh");

毕竟

.trigger("expand");

电话。因此，代码中的一个示例是：

$('#qTwoCollapsible').trigger("expand").collapsible("refresh");
相关文章：