側邊欄未顯示

Question

嗨，當我點擊切換按鈕時，我的側邊欄沒有出現。 我看到它向側面移動，但側欄為空白/透明。 我認為這與我的js文件有關。 有人可以幫幫我嗎，我是編碼和這個社區的新手。 提前致謝！！

 /* Set the width of the sidebar to 250px and the left margin of the page content to 250px */ function openNav() { document.getElementById("mysidebar").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; } /* Set the width of the sidebar to 0 and the left margin of the page content to 0 */ function closeNav() { document.getElementById("mysidebar").style.width = "0"; document.getElementById("main").style.marginLeft = "0"; }

 <body> <section id="mysidebar"> <div class="sidebar"> <ul> <li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a></li> <li><a href="#">Chapter 1</a></li> <li><a href="#">Chapter 2</a></li> <li><a href="#">Chapter 3</a></li> <li><a href="#">Chapter 4</a></li> <li><a href="#">Chapter 5</a></li> </ul> </div> <div id="main"> <button class="openbtn" onclick="openNav()">&#9776;</button> <h2>Collapsed Sidebar</h2> </div> </section> <script src="C:\\Users\\quinc\\Documents\\Developer\\Project 2.0\\js\\members.js"></script> </body> </html>

與我的js腳本有關。 我不知道問題所在。

有人可以幫我嗎，我是編碼的新手，這是我正在從事的第一個項目。 我將HTML，CSS和JS代碼放在下面。

謝謝

Answer 1

您正在訪問主要部分mysidebar 。 單擊closeNav函數時，您的mysidebar部分設置為width: 0 。

取而代之的是，您需要訪問sidebar div，而且僅設置width:0無效，因為sidebar div包含需要占用一定寬度的ul元素，而ul li a內部的文本也需要一些寬度。 這樣就可以使用CSS display屬性

更改您的openNav和closeNav函數。

function openNav() {
    var sidebar = document.getElementById("sidebar");
    sidebar.style.width = "250px";
    sidebar.style.display = "block";
    document.getElementById("main").style.marginLeft = "250px";
}


/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
    document.getElementById("sidebar").style.display = "none";
    document.getElementById("main").style.marginLeft = "0";
}

改變你的HTML。 將id添加到邊欄

<div id="sidebar">
            <ul>
                <li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a></li>
                <li><a href="#">Chapter 1</a></li>
                <li><a href="#">Chapter 2</a></li>
                <li><a href="#">Chapter 3</a></li>
                <li><a href="#">Chapter 4</a></li>
                <li><a href="#">Chapter 5</a></li>
            </ul>
        </div>

Answer 2

嘗試這個：

 function openNav() { document.getElementById("sidebar").style.display = "inline-block"; document.getElementById("mysidebar").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; } function closeNav() { document.getElementById("sidebar").style.display = "none"; document.getElementById("main").style.marginLeft = "0"; }

 <section id="mysidebar"> <div class="sidebar" id="sidebar" style="display: none;"> <ul> <li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a></li> <li><a href="#">Chapter 1</a></li> <li><a href="#">Chapter 2</a></li> <li><a href="#">Chapter 3</a></li> <li><a href="#">Chapter 4</a></li> <li><a href="#">Chapter 5</a></li> </ul> </div> <div id="main"> <button class="openbtn" onclick="openNav()">&#9776;</button> <h2>Collapsed Sidebar</h2> </div> </section>

側邊欄未顯示

問題描述

2 個解決方案

解決方案1
0 2019-01-03 04:01:51

解決方案2
0 2019-01-03 05:06:49

側邊欄未顯示

問題描述

2 個解決方案

解決方案1 0 2019-01-03 04:01:51

解決方案2 0 2019-01-03 05:06:49

解決方案1
0 2019-01-03 04:01:51

解決方案2
0 2019-01-03 05:06:49