為什么w3css側面導航欄在Asp.net母版頁中不起作用？

Question

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

Answer 1

將type="button"添加到您的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>

為什么w3css側面導航欄在Asp.net母版頁中不起作用？

問題描述

1 個解決方案

解決方案1
0 已采納 2017-03-20 20:30:24

為什么w3css側面導航欄在Asp.net母版頁中不起作用？

問題描述

1 個解決方案

解決方案1 0 已采納 2017-03-20 20:30:24

解決方案1
0 已采納 2017-03-20 20:30:24