0

我是 js/jquery mobile 的新手，我一直在尝试创建一个复杂的示例来提高我的技能。

我有一个 JQM Accordion，将列表视图与每个“可折叠”div 上的每行一个复选框进行分组。我想要做的是使用动态导航栏“标记/取消标记”活动列表视图中的所有复选框。例子：

  • 用户选择一个“组”（手风琴“可折叠”div）
    • 用户选中列表视图中的任何复选框
      • 该页面显示一个带有两个选项的导航栏：“标记全部”/“取消标记全部”（具有明显的行为）。这必须保持打开状态，直到该组中标记了任何复选框。如果用户选择“取消标记”所有这些，导航栏应该被隐藏。
        • 如果用户选择另一个“组”，页面必须取消选中过去组中的所有复选框，并隐藏导航栏。

经过大量研究，我已经能够创建整个东西，这就是我想出的：http: //jsfiddle.net/mauriciorcruz/2zgt8/。

我的问题是

$('#navbar-footer').show();
$('#navbar-footer').hide();

在不同组中单击某些复选框后停止按预期工作。

我已经搜索了很多答案，但似乎我没有足够的技能来理解这个问题。我的猜测是这与我如何实现处理程序有关，因为我的实现在调试时完全有效。

任何帮助表示赞赏。

谢谢！

4

1 回答 1

0

问题与 jquery-mobile 的tapToggle有关，您可以像这样在页脚添加 data-tap-toggle="false" 来修复它 

<div data-role="footer" data-tap-toggle="false" data-position="fixed" id="index-footer">

或在 $(document).ready 这样 

$("[data-role=footer]").fixedtoolbar({ tapToggle: false });

页脚不会在屏幕点击时切换，但它会在您的功能上工作
http://jsfiddle.net/2zgt8/2/
如果您想保留 tapToggle，您需要在点击处理程序上添加 e.stopPropagation() 像这样 

$('#index-footer').on('click', '#mark-all', function(e) { 
    e.stopPropagation();
    //...
});

http://jsfiddle.net/2zgt8/3/

于 2013-10-15T15:55:24.330 回答