Question

我想扩展jQuery Mobile可折叠内容部分的可折叠内容。我知道我可以单击标题来展开它，但我不希望每次页面刷新时都依赖用户单击相同的部分。我知道我可以在html中设置一个变量，但这不会做，因为可折叠内容仍会在回发时关闭。

我需要用代码而不是用户来完成。你可以在下面看到我失败的尝试。我使用VS 2013的Web Forms项目中的模板作为开始然后我添加了jQuery Mobile并遵循jQuery Mobile的site的指示，或者我认为。这是一个简化的测试页面，但最终，我希望有一个ASP.NET变量来检测在回发时是否已经单击了一个部分，并且是否已经单击了可折叠部分，再次打开它以便用户不会必须再次点击同一个地方。有没有办法坚持扩展状态或动态扩展jQuery Mobile的可折叠内容？

<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="ExpandTest._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

    <script>
        $(".myDiv").trigger("expand");
    </script>

    <div class="jumbotron">
        <h1>ASP.NET</h1>
        <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
        <p><a href="http://www.asp.net" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
    </div>

    <div class="row">
        <div class="myDiv" data-role="collapsible">
            <h2>Getting Started</h2>
            <p>ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model. A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access.
            </p>
            <p>
                <a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301948">Learn more &raquo;</a>
            </p>
        </div>
    </div>

</asp:Content>

- 编辑 - 我试过（甚至仅仅是为了证明概念）失败了：

$(".myDiv").trigger('expand'); // Apparently does not execute
$('.myDiv').on("click", alert("Fe Fi Foo Bar!");); // does not run anything within
$(document).on("pagecreate", function () {

另外，我最近读过document.ready应该用于jQuery但是not jQuery Mobile。告诉我的是，我不能使用其他用户认为可行的相同代码以及已在jsfiddle中运行的相同代码。这让我相信我错过了一些显而易见的事情。我修改了加载jQuery Mobile与代码相关的顺序无济于事。

enter image description here

Answer 1

将ASP.Net隐藏字段添加到启用了viewstate的页面。

jQM collapsible有扩展和崩溃的事件。在客户端，您可以处理这些事件并创建当前展开的可折叠的列表，并将此列表保存到隐藏字段。回发后，pagecreate事件中的客户端代码可以从隐藏字段中读取列表并展开这些项目。

为所有可折叠div分配ID，然后您可以将逗号分隔的ID列表保存到隐藏输入：

$(document).on("pagecreate", "#page1", function(){
    var prevExpanded =  $("#hidden").val().split(',');
    $.each( prevExpanded, function( key, value ) {
          $("#" + value).collapsible( "option", "collapsed", false );
    });

    $( "[data-role=collapsible]" ).on("collapsiblecollapse collapsibleexpand", function( event, ui ) {
             GetAllExpanded();    
    });
});


function GetAllExpanded(){
    var AllExpanded = [];
    $( "[data-role=collapsible]" ).not(".ui-collapsible-collapsed").each(function( index ) {
      AllExpanded.push($(this).prop("id"));
    });
    $("#hidden").val(AllExpanded.join(','));
}

Answer 2

使用<asp:hidden>字段，然后展开更改其值。然后，您将能够在回发时设置$(".col-md-4").trigger("expand");的值。

Answer 3

下面的工作很顺利，虽然我仍然不知道如何更好地处理Web窗体，我必须找到一种方法来有条件地加载它，可能使用前面建议的隐藏字段。谢谢您的帮助。

<script type="text/javascript">
    $(function () {
        $("h2.ui-collapsible-heading").trigger("click");
    });
</script>

动态扩展可折叠内容

3 个答案: