返回jquery移动列表视图和可折叠集打开

Question

我有一个3层的列表，当我从另一个页面返回时，它最终会转到另一个page...so，我希望列表项是打开的，并指示单击了哪个项。

这是怎么做到的？

<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>


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

现在从主列表中，当uset单击item-1时，它将显示另一个set-1、set-2、set-3等列表，现在单击set-1，用户将被带到另一个“外部页面”。

当用户单击外部页面中的“后退”按钮时，它会显示出，set-1已被单击，并且可折叠集应该是open..currently i，此时无法显示用户所在的位置。

Answer 1

很容易抓到。其中一种方法是在导航到其他页面时使用cookie存储单击的列表项。

如果您决定使用此方法，则需要jquery插入-- https://github.com/carhartl/jquery-cookie

我没有太多的时间演示，这是一个快速的，但你可以很容易地看到什么从演示发生。我所做的就是给列表项一个id和(a)类id，这样我们就知道单击了哪一个，哪个应该将背景色变为不需要点击的背景颜色。

如果有多个列表展开，那么将可扩展列表视图的id存储到另一个cookie中，并展开正确的列表，就像我在演示中使用项目时所做的那样。

Demo

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
});