Как скрыть и показать панель инструментов нижнего колонтитула на страницеhow

Question

im работает с 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

дают классы заголовка и колонтитул CSS, которые не содержат декларацию «дисплей: нет», и использовать яваскрипт сенсорного обработчик события, связанный с window, чтобы показать их удаление этого класса. Также обратите внимание, что 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>