jquery移動列表視圖和可摺疊集打開在回去

Question

我有一個3層列表，在最後去另一個頁面...所以當我從另一個頁面回來我想列表項目打開並指示哪個項目被點擊。

如何才能做到這一點

<div data-role="collapsible" > 
<h2>Header</h2> 
<ul data-role="listview"> 
<li><a href="#item1">item-1</a></li> 
<li><a href="#">item-2</a></li> 
<li><a href="#">item-3<span class="ui-li-count">12 set</span></a></li> 
    </ul> 
</div> 

----------------------------------------------------------------- 
    <div data-role="page" id="item1"> 

    <div data-role="header"> 
    <a href="#mainPage" data-role="button" data-icon="arrow-l">Back</a> 
    <h1>item1</h1> 
    </div> 

    <div data-role="content"> 
    <div class="container"> 
     <ul data-role="listview"> 
     **<li><a href="material/set1.html" rel="external">Set 1</a></li>** 
     <li><a href="#">Set 2</a></li> 
     <li><a href="#">Set 3</a></li> 
     </ul> 
    </div> 
</div> 

    <div data-role="footer"> 
    <h4>Footer</h4> 
    </div> 
    </div> 


----------------------------------------------------------------- 

現在從主力名單時，就項目-1的USET點擊它呈現一套-1的另一份名單，設置2，設置3等現在開始點擊set-1，用戶被帶到另一個「外部頁面」。

當用戶從外部頁面單擊後退按鈕它顯示錶明set-1被點擊並且可摺疊集合應該打開..目前我得到可摺疊集合摺疊並且沒有指示用戶在哪裏

Answer 1

它很容易實現。一種方法是使用cookie來存儲您在導航到其他頁面時單擊的列表項目。

如果你決定使用這種方法，你需要jQuery的餅乾堵漏 - https://github.com/carhartl/jquery-cookie

我沒有太多的時間用於演示的一個快速，但你可以很容易看到最新從演示發生。我所做的只是給列表項目一個id和（a）類id，所以我們知道哪一個被點擊，哪一個轉動背景顏色來指示它被點擊。

如果您有多個展開的列表，然後將可展開列表視圖的ID存儲到另一個cookie，並展開正確的一個，就像我在演示中使用這些項目所做的那樣。

演示

http://jsfiddle.net/wgt88h3n/

$("#listview").on("click", ">li", function(event, ui) { // this function gets the id from the list items 


var id  = $(this).closest("li").attr('id'); 

$.cookie('item', id); // store the id of the list item to a cookie 

}); 

$("#topage2").on("click", function(event, ui) { 

var item = $.cookie('item'); // lets get the item of the cookie 

$(".item1, .item2, .item3").css({backgroundColor: '#f6f6f6;'}) // lets set the background color back to normal 

$.mobile.changePage("#page2" , { transition: "pop" }) ///change to page 2 
}); 

$("#topage1").on("click", function(event, ui) { 

$.mobile.changePage("#page1" , { transition: "pop" }) 

$("#mylist").collapsible("expand"); // expand the collapsible list. if you have more lists,,, to expand the correct one, use another cookie and use the same method when we stored the list item. 

var item = $.cookie('item'); /// read the cookie item 

$("." + item).css({backgroundColor: 'rgba(72, 121, 49, 0.38)'}) ///set the background color of the last item clicked to green 
});