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的回答。如果您想再次.toggle()菜单，也可以添加.show()而不是hide。

Answer 2

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

从链接页面中提取：

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

应该是

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

Answer 3

在这里，我创建了一个显示jQuery使用的jsFiddle。它更干净，更容易理解，只依靠一次点击。我没有更多的代码就无法重新创建你的代码，所以我创建了一个示例来显示逻辑，在你的例子中应该很容易使用逻辑。

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

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

.menu {
    display: none;
}

http://jsfiddle.net/yhf3dfcs/

移动菜单按钮2单击以切换菜单

3 个答案: