如何在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>