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

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

我想做的是：

当我打开一个页面时，我总是希望工具栏被隐藏，只有当我在触摸屏上单击一次时，我才想打开它们

我有一个朋友写的剧本，很管用

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

是否仍存在只需单击一次即可执行此操作

注意：我的项目中有几个

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);

.hidden{display:none}

CSS:

 <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);

.hidden{display:none}

---

给出包含声明“display:none”的页眉和页脚CSS类，并使用绑定到

window

的javascript touch事件处理程序通过删除该类来显示它们。 还请注意，data role=“header”有点傻，因为html有一个用于此的元素。其次，请注意，您已经给出了两个

id=footer

，这保证会导致问题

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

。。。
...
...

+

函数enableHeaderFooter（）{
$（文档）.off（“touchend”，enableHeaderFooter）；
$（“页眉，页脚”）.removeClass（“隐藏”）；
}
$（文档）.on（“touchend”，enableHeaderFooter）；

谢谢你的提示。。。我已经照你说的做了。。但是工具栏不再打开…添加了隐藏的类，在我的css文件中我写道：。隐藏{display:none}请看我的代码。。。使用您的解决方案进行了更新#使用此代码，使用“单击”而不是“触摸端”来显示它在普通浏览器中工作-单击右下面板，然后显示页眉和页脚。您可以尝试“touchstart”，以防您正在测试的浏览器在触摸事件中有点损坏。