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。单击mysidebar功能时，您的width: 0部分将设置为closeNav。

相反，您需要访问sidebar div并且仅设置width:0将不起作用，因为sidebar div包含ul元素，该元素占用{ {1}}也需要一些宽度。因此，您可以使用CSS ul li a属性

更改您的display和openNav函数。

closeNav

更改您的html。将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"; }添加到侧边栏

id

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 个答案: