動態展開可摺疊內容

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

來源

2014-02-24 Justin Hale

你有沒有在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");的值。

來源

2014-02-24 19:57:33 MaxPRafferty

在啓用了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(',')); 
}

來源

2014-02-24 20:10:06 ezanker

好以下工作，雖然我仍處於虧損狀態，更好地在Web窗體上工作的方式，我將不得不找到一種有條件地加載它的方法，或許使用前面提到的隱藏字段。謝謝您的幫助。

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

來源

2014-02-27 16:52:53

動態展開可摺疊內容

回答

相關問題