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

【问题标题】：Why w3css side nav bar is not working in Asp.net Master page?为什么 w3css 侧导航栏在 Asp.net 母版页中不起作用？
【发布时间】：2017-08-12 07:19:30
【问题描述】：

我有一个母版页。我使用 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>

【问题讨论】：

标签： javascript jquery html css asp.net

【解决方案1】：

将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>

【讨论】：

谢谢天才。我不能再接受 7 分钟的回答。