0

我的应用程序有一个移动页面，它使用 jquery 移动“可折叠”数据角色来隐藏 Microposts（Hartl 的教程），直到用户单击它们展开。

我还使用修改后的分页来呈现分页链接。 https://gist.github.com/jugyo/3135120

<div data-role="collapsible">
  <h3>Show Microposts (<%= @user.microposts.count %>)</h3>
  <ul data-role="listview">
    <%= render @microposts %>
  </ul>
  <%= will_paginate @microposts, 
    renderer: WillPaginate::ActionView::JqueryMobilePaginateLinkRenderer,
    previous_label: 'Prev',
    next_label: 'Next'
  %>
</div>

我的问题是：如何向分页点击添加事件？我希望在第一次加载页面时使用 data-role="collapsible" 折叠列表（默认），但是当我单击下一步（或稍后，上一个）时，我希望可折叠容器添加 data-collapsed= “false”属性，以便列表打开。（单击下一步并再次进入折叠列表没有意义）

我是否将其放在具有分页代码的 rb 中？如果是这样，我如何引用页面元素？还是我在某处放了一些 jquery ......？

任何帮助表示赞赏。

4

1 回答 1

1

您可以在分页中添加class或。id我将添加一个id：

<%= will_paginate @microposts, 
  renderer: WillPaginate::ActionView::JqueryMobilePaginateLinkRenderer,
  id: 'my_pagination',
  previous_label: 'Prev',
  next_label: 'Next'
%>

然后给你的主 div 某种标识符：

<div data-role="collapsible" id="my_list">

现在您可以使用 jQuery 手动激活它：

$("#my_pagination").click(function() { 
    $("#my_list").data("collapsed", $("#my_list").data('collapsed') == 'false' ? 'true' : 'false') 
 });
于 2013-04-18T05:12:53.673 回答