jquery mobile listview和可折叠设置在返回时打开

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>


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

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

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

Answer 1

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

如果您决定使用此方法，您将需要插入 jquery cookie -- 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
});