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

jquery mobile listview and collapsible set open on going back

本文关键字：返回 可折叠 移动 列表 视图 jquery      更新时间：2023-09-26

我有一个三层列表，它在末尾转到另一个页面。。。所以当我从另一个页面回来时，我希望列表项打开，并指示哪个项目被点击了。

怎么做

<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时，它会显示另一个集合-1、集合-2、集合-3等列表。现在，点击集合-1时，用户会被带到另一个"外部页面"。

当用户从外部页面单击后退按钮时，它会显示，表示已单击集合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
});
相关文章：