javascript - 为什么 w3css 侧导航栏在 Asp.net 母版页中不起作用？

我有一个主页。我使用 w3.css 文件创建了侧导航栏。它在窗口宽度超过 992px 时起作用。当我将窗口缩小为标签大小之类的小窗口时，可折叠响应式侧边导航 无法正常工作。它正在重新加载整个页面。

这是我的代码:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <script src="js/jquery-3.1.1.min.js"></script>    
    <link href="css/w3.css" rel="stylesheet" />
    <link href="css/jquery-ui.css" rel="stylesheet" />

    <asp:ContentPlaceHolder ID="head" runat="server">

    </asp:ContentPlaceHolder>
</head>
    <body>
        <form id="form1" runat="server">
            <div class="w3-sidebar w3-bar-block w3-collapse w3-card-2 w3-animate-left" style="width: 200px;" id="mySidebar">
            <button class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()">Close &times;</button>
            <a href="#" class="w3-bar-item w3-button">Link 1</a>
            <a href="#" class="w3-bar-item w3-button">Link 2</a>
            <a href="#" class="w3-bar-item w3-button">Link 3</a>
        </div>

        <div class="w3-main" style="margin-left: 200px">
            <div class="w3-teal">
                <button class="w3-button w3-teal w3-xlarge w3-hide-large" onclick="w3_open()">&#9776;</button>
                <div class="w3-container">
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                    <%--<h1>My Page</h1>--%>
                </div>
            </div>
        </div>
        <script>
            function w3_open() {
                document.getElementById("mySidebar").style.display = "block";
            }
            function w3_close() {
                document.getElementById("mySidebar").style.display = "none";

            }
        </script>
    </form>


</body>

最佳答案

将 type="button" 添加到您的按钮元素，这样它们就不会提交它们所在的表单。

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
  <title></title>
  <script src="js/jquery-3.1.1.min.js"></script>
  <link href="css/w3.css" rel="stylesheet" />
  <link href="css/jquery-ui.css" rel="stylesheet" />

  <asp:ContentPlaceHolder ID="head" runat="server">

  </asp:ContentPlaceHolder>
</head>

<body>
  <form id="form1" runat="server">
    <div class="w3-sidebar w3-bar-block w3-collapse w3-card-2 w3-animate-left" style="width: 200px;" id="mySidebar">
      <button type="button" class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()">Close &times;</button>
      <a href="#" class="w3-bar-item w3-button">Link 1</a>
      <a href="#" class="w3-bar-item w3-button">Link 2</a>
      <a href="#" class="w3-bar-item w3-button">Link 3</a>
    </div>

    <div class="w3-main" style="margin-left: 200px">
      <div class="w3-teal">
        <button type="button" class="w3-button w3-teal w3-xlarge w3-hide-large" onclick="w3_open()">&#9776;</button>
        <div class="w3-container">
          <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
          </asp:ContentPlaceHolder>
          <%--<h1>My Page</h1>--%>
        </div>
      </div>
    </div>
    <script>
      function w3_open() {
                document.getElementById("mySidebar").style.display = "block";
            }
            function w3_close() {
                document.getElementById("mySidebar").style.display = "none";
            }
    </script>
  </form>


</body>

关于javascript - 为什么 w3css 侧导航栏在 Asp.net 母版页中不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42913326/

javascript - 为什么 w3css 侧导航栏在 Asp.net 母版页中不起作用？

上一篇：php - 将引导表单设置为居中

下一篇：jquery - 在固定高度的容器中调整图像大小