Javascript 移动菜单按钮2次单击可切换菜单

使用：VS 2013，ASP.NET（VB）Webforms

将WebForms网站从.NET 2.0升级到.NET 4.5，并为谷歌支持增加移动友好性

在右上角创建了一个按钮，如下所示：

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

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

id为“menu”的元素如下所示：

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

然而，要放下菜单，我需要触摸两次，而不是一次。所有菜单链接无需多次触摸即可正常工作

你自己去看看吧。从移动设备点击并尝试一下

我知道我错过了一些简单的事情；有人能给我指出正确的方向吗

---

谢谢

可能是

菜单.style.display在开始时不等于
none

因此，第一次单击菜单时，您会将
显示设置为
none
。第二次
显示
为
无
，这就是它在第二次单击时工作的原因

我认为您需要检查
显示是否不等于
块
，然后将其设置为
块

试试这个：

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

编辑
看看@Billy Purvis的回答。如果想再次隐藏菜单，也可以添加
.toggle（）
而不是
.show（）
。
在这里，我创建了一个JSFIDLE，显示jQuery的使用。它更清晰、更容易理解，只需单击一次。
如果没有更多的代码，我无法重新创建您的，因此我创建了一个示例来显示逻辑，在您的示例中使用逻辑应该很容易

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

单击按钮（或标签）后，将显示菜单。将此css放在菜单上会隐藏它，直到需要它为止

.menu {
    display: none;
}

问题在于属性id为==“menu”的div没有值
display:none作为样式属性，因此基本上在第一次单击时，您的代码将指定给该值的元素，然后在第二次单击值
display:block

从链接页面中提取：

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



应该是

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


您可以使用jQuery click和slideToggle来代替。这将非常有效，但是，我要强调的是，投票结果是因为OP没有要求其他解决方案，在这种情况下，不需要像jQuery那样包含整个库来解决该问题。（OP source没有使用jquery或添加该标记）当然，但就保持代码整洁而言，使用更少实际编写的代码不是更好的解决方案吗。我假设OP在某个时候会使用jQuery。不过，我觉得没有必要发表评论。OP的道路似乎比它可能的更艰难、更混乱。唉，OP的选择。谢谢解释。菜单的CSS在样式表中显示为display:none；只是一个备忘，以备将来参考。这是最有可能导致落选的原因。不幸的是，我不能向上投票，因为这个问题既不要求也不包括jQuery的标记。单独CSS文件中的样式表默认显示为：无；