移动菜单按钮 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';
    }
}

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

<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';
}

编辑 看看@Billy Purvis 的回答。如果您想再次hide 菜单，也可以添加.toggle() 而不是.show()。

Answer 2

问题是具有属性 id === "menu" 的 div 没有值 display: none; 作为样式属性，所以基本上在第一次单击时，您的代码将分配给该值的元素，然后在第二次点击值display: block

从链接页面中提取：

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

应该是

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

Answer 3

在这里，我创建了一个 jsFiddle 来展示 jQuery 的使用。它更干净、更容易理解，并且只需要单击一下。 如果没有更多代码，我无法重新创建你的，所以我创建了一个示例来显示逻辑，在你的示例中使用逻辑应该很容易。

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

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

.menu {
    display: none;
}

http://jsfiddle.net/yhf3dfcs/