Боковая панель не появляется - PullRequest
0 голосов
/ 03 января 2019

Привет, моя боковая панель не появляется, когда я нажимаю на кнопку переключения.Я вижу, что он движется в сторону, но боковая панель пуста / прозрачна.Я думаю, что это как-то связано с моим файлом 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 внизу.

Спасибо

Ответы [ 2 ]

0 голосов
/ 03 января 2019

Попробуйте это:

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>
0 голосов
/ 03 января 2019

Вы получаете доступ к основному разделу mysidebar. Ваша секция mysidebar устанавливается на width: 0, когда вы нажимаете closeNav функцию.

Вместо этого вам нужен доступ к sidebar div, а также просто установка width:0 не будет работать, потому что sidebar div содержит элемент ul, который занимает некоторую ширину, а текст внутри ul li a также требует некоторой ширины. Так что вы можете использовать css display property

Измените функции 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...