Question

我在我的项目中使用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);

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>

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

1 个答案: