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，用户将被带到另一个＆＃ 34;外部页面＆＃34;。

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

Answer 1

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

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

jquery移动列表视图和可折叠设置打开后退

1 个答案: