Question

看看这段代码：

        function ToggleMenu() {
            var v = $("#MenuVisibility").val() ;
            if (v == "1") {
                $('#MenuVisibility').val("0");

            }
            else {
                $('#MenuVisibility').val("1");
            }
            v = $("#MenuVisibility").val();
            alert(v);

        }
    </script>
    <title></title>
</head>
<body>
    <input type="hidden" value="1" id="MenuVisibility" />
    <form id="form1" runat="server">

    <div id="Menu">
        <a class="MainMenu" href="#" onclick="OpenCloseMenu()">Fun</a>
        <div id="ExtendedMenu">
            <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
                <li><a href="#">Item 5</a></li>
            </ul>
        </div>
    </div>
    <asp:Button ID="Button1" runat='server' Text="Toggle Menu" OnClientClick="ToggleMenu()" />

    </form>
</body>
</html>

第一次点击时，隐藏字段值设置为0，但是当我第二次点击时，它的值不会更改为1。为什么？

Answer 1

因为当您单击按钮时，表单会被提交，页面会刷新。尝试阻止表单提交：

$("#form1").submit(function (e) {
    e.preventDefault();
});

Answer 2

尝试使用：

<input type="button" ID="Button1" value="Toggle Menu" onclick="ToggleMenu()" />

Answer 3

如果您要进行服务器端代码，也可以将切换逻辑放在按钮的单击事件中：

标记：

<input type="hidden" value="1" id="MenuVisibility" runat="server" />

代码背后：

protected void Button1_Click(object sender, EventArgs e) 
{ 
   if (MenuVisibility.Value == 1)
      MenuVisibility.Value = 0;
   else
      MenuVisibility.Value = 1;
}

并添加button1的onclick =“Button1_Click”。

为什么隐藏字段值不会更新

3 个答案: