我有一个母版页。我使用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 ×</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()">☰</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 ×</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()">☰</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>