javascript - jquery mobile listview 和可折叠集在返回时打开

Question

我有一个三层列表，最后会转到另一个页面...所以当我从另一个页面返回时，我希望列表项打开并指示单击了哪个项目。

如何做到这一点

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


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

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

当用户从外部页面单击后退按钮时，它显示表明单击了 set-1 并且可折叠集应该打开。目前我将可折叠集折叠起来，并且没有指示用户在哪里

Answer 1

这很容易实现。实现此目的的一种方法是使用 cookie 来存储您在导航到其他页面时单击的列表项。

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

我没有太多时间进行演示，虽然演示很快，但您可以轻松地看到演示中发生的情况。我所做的就是给列表项一个 id 和 (a) 类 id，这样我们就知道哪个项目被单击了，以及哪个项目的背景颜色被单击以表明它被单击了。

如果您有多个可展开的列表，则将可展开 ListView 的 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
});