动态展开可折叠内容

Posted 2023-05-09

【中文标题】动态展开可折叠内容

【英文标题】：Dynamically Expand Collapsible Content

【发布时间】：2014-03-26 13:48:12

【问题描述】：

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

我需要使用代码而不是用户来完成此操作。你可以在下面看到我失败的尝试。我使用 VS 2013 的 Web 表单项目中的模板作为开始，然后我添加了 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 与代码相关的顺序，但无济于事。

【问题讨论】：

您是否尝试过可折叠 div 中的data-collapsed="false" 属性？如果您使用的是 JQM 1.4 $(".selector").collapsible("expand");.

data-collapsed="false" 无论天气如何都保持同一个集合打开我希望它打开，即它不是动态的。我正在使用 JQM 1.4 和 $(".myDiv").collapsible("expand"); 不能以某种方式使用它。

@Omar 如果$(".myDiv").collapsible("expand"); 以任何方式为您工作我想知道您何时何地加载 JQM 以及何时何地加载自定义脚本？

我添加了<a id="btn" href="#" data-role="button"> Open / close menus </a>和` $("#btn").bind("click", function (event) $("h2.ui-collapsible-heading").trigger(" click"); );` 会触发点击。现在我只需要在pageinit 上触发一个展开事件。

使用pagecontainbeforeshow 而不是pageinit。 $("#col_id").collapsible("expand");.

【参考方案1】：

在启用视图状态的页面中添加一个 ASP.Net 隐藏字段。

jQM 可折叠具有展开和折叠的事件。在客户端，您可以处理这些事件并创建当前展开的可折叠项的列表，并将此列表保存到隐藏字段。回发后，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(','));

【参考方案2】：

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

【参考方案3】：

以下是可行的，尽管我仍然不知道在 Web 窗体上工作的更好方法，我必须找到一种有条件地加载它的方法，也许使用前面建议的隐藏字段。谢谢您的帮助。

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