如何在Pageshow中隐藏和显示页眉和页脚工具栏

Question

我在我的项目中使用jQuery mobile，我实现了页眉和页脚工具栏。

我想做的是：

总是在我打开页面时，我希望工具栏是隐藏的，并且只有当我在触摸屏上单击1次时，我才想打开它们。

我有一个朋友的脚本，它可以工作，

但我必须在触摸屏上双击才能打开它们...

仍然存在，只有1次点击才能做到这一点？

注意：我的项目中有几个data-role="pages"

我的代码：

HTML5：

 <div data-role="header" data-theme="a" data-position="fixed" data-id="footer" data-fullscreen="true" class="hidden">TESTE</div>

<div data-role="footer" data-theme="a" data-position="fixed" data-id="footer2" data-fullscreen="true" class="hidden">TESTE</div>    

脚本：

  function enableHeaderFooter() {
    $(document).off("touchend", enableHeaderFooter);
    $("header, footer").removeClass("hidden");
  }
  $(document).on("touchend", enableHeaderFooter);

CSS：

.hidden{display:none}

Answer 1

提供包含声明“ display：none”的页眉和页脚CSS类，并使用绑定到window的javascript touch事件处理程序通过删除该类来显示它们。 另请注意，data-role =“ header”有点愚蠢，因为html具有用于此的元素。 其次，请注意，你给这两个id=footer这是保证会导致问题。

<header class="hidden" ...>...</header>
...
<footer class="hidden" ...>...</footer>

+

<script>
  function enableHeaderFooter() {
    $(document).off("touchend", enableHeaderFooter);
    $("header, footer").removeClass("hidden");
  }
  $(document).on("touchend", enableHeaderFooter);
</script>