Мобильная кнопка меню 2 щелчка для переключения меню

Question

Использование: VS 2013, ASP.NET (VB) Webforms.

Обновление веб-сайта WebForms с .NET 2.0 до .NET 4.5 и добавление удобства для мобильных устройств для поддержки Google.

Создано кнопку в правом верхнем углу, как это:

<a href="#" onclick="toggleMenuDiv();"> 
    <img class="headerimg-r" src="/images/MenuBtn6464.png" /> 
</a> 

Javascript выглядит следующим образом:

function toggleMenuDiv() { 
    var menu = document.getElementById('menu'); 
    if (menu.style.display == 'none') { 
     menu.style.display = 'block'; 
    } 
    else { 
     menu.style.display = 'none'; 
    } 
} 

элемент с "меню" ид выглядит следующим образом:

<div class="dropdownmenu" id="menu"> 

Однако, чтобы отбросить меню, мне нужно коснуться дважды, а не один раз. Все ссылки на меню работают правильно без нескольких касаний.

Не стесняйтесь видеть это сами. Удалите http://www.pedfast.com с мобильного устройства и попробуйте.

Я знаю, что мне не хватает чего-то простого; может кто-нибудь указать мне в правильном направлении?

Спасибо!

Answer 1

Возможно, menu.style.display не соответствует none в начале?

Итак, в первый раз, когда вы нажмете меню, вы установите display на none. И второй раз display - none, и вот почему он работает при втором нажатии!

Я думаю, вам нужно проверить, не display не равно block, а затем установить его на block!

Попробуйте это:

if (menu.style.display != 'block') { 
    menu.style.display = 'block'; 
} 
else { 
    menu.style.display = 'none'; 
} 

EDIT Просто посмотрите на @Billy Первис ответ. Вы также можете добавить .toggle() вместо .show(), если вы хотите вернуть hide в меню.

Answer 2

Здесь я создал jsFiddle, показывающий использование jQuery. Он чище и понятнее, и он полагается только на один клик. Я не мог воссоздать ваш без кода, поэтому я создаю пример, чтобы показать логику, в вашем примере должно быть легко использовать логику.

$("button").click(function(){ 
    $(".menu").show(); 
}); 

После нажатия кнопки (или тега) отображается меню.Ввод этого CSS в меню скрывает его, пока он не нужен

.menu { 
    display: none; 
} 

http://jsfiddle.net/yhf3dfcs/

Answer 3

Проблема заключается в том, что DIV с идентификатором атрибута «меню» === не имеет значение display: none; как атрибут стиля, так что в основном в первый клик код присваивание элемента, значение, а затем, во второй кнопке мыши значения display: block

извлеченного из связанной страницы:

<div class="dropdownmenu" id="menu"> 

Это должно быть

<div class="dropdownmenu" id="menu" style="display: none;">