动态展开可折叠内容

问题描述：

我想展开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

你有没有在collapsible div中试过'data-collapsed =“false”'属性？如果您使用JQM 1.4'$（“。selector”）。collapsible（“expand”）;'。 – Omar

'data-collapsed =“false”'不管天气如何，我都希望它是开放的，即它不是动态的。我正在使用JQM 1.4和'$（“。myDiv”）。collapsible（“expand”）;'不能以我用它的方式工作。 –

@Omar如果$（“。myDiv”）。collapsible（“expand”）;'以任何方式为您工作我想知道何时何地加载JQM以及加载自定义脚本的时间和位置？ –

答

使用<asp:hidden>领域，并拓展改变它们的值。然后您可以在回发中设置$(".col-md-4").trigger("expand");的值。

答

在启用了viewstate的页面中添加一个ASP.Net隐藏字段。

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

分配ID的所有可折叠的div，那么你可以以逗号分隔的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(',')); 
}

答

好以下工作，虽然我仍处于亏损状态，更好地在Web窗体上工作的方式，我将不得不找到一种有条件地加载它的方法，或许使用前面提到的隐藏字段。谢谢您的帮助。

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

动态展开可折叠内容

相关推荐