Вертикальная панель навигации - функция Onclick не работает - PullRequest
Новая
       11

Вертикальная панель навигации - функция Onclick не работает

0 голосов
/ 25 ноября 2018

При нажатии на эту функцию toggleSideBar () должна открыться, но она не работает.Я вставлю код ниже.Я не знаю, где проблема.Я думаю, что часть JS в порядке. Пожалуйста, дайте мне знать проблему.Я пытался решить эту проблему в течение последних 2 часов. Но доно, где проблема 

function toggleSideBar() {
  document.getElementById('sidebar').classList.toggle('active');
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  position: relative;
  top: 30px;
  left: 68px;
}

#sidebar {
  position: fixed;
  width: 250px;
  height: 100vh;
  background-color: aqua;
  left: -250px;
}

#sidebar .toggle-btn {
  position: absolute;
  left: 270px;
  top: 20px;
  cursor: pointer;
}

#sidebar .toggle-btn span {
  display: block;
  width: 30px;
  height: 5px;
  background: #000;
  margin-bottom: 5px;
}

#sidebar .active {
  left: 0px;
}

ul {
  width: 100%;
  margin-top: 50px;
}

li {
  list-style: none;
  padding: 20px 70px;
  border-bottom: 1px solid antiquewhite;
  text-align: center;
}

a {
  text-decoration: none;
  color: rebeccapurple;
  font-family: 'roboto';
  font-size: 1.2rem;
  text-transform: uppercase;
  font-weight: 900;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Vertical Navigation Bar</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <div id="sidebar">
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/HP_logo_630x630.png" alt="hp_logo" width="100px" height="100px" class="logo" />
    <div class="toggle-btn" onclick="toggleSideBar()">
      <span></span> <span></span> <span></span>
    </div>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Trending</a></li>
      <li><a href="#">Technology</a></li>
      <li><a href="#">Websites</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About Me</a></li>
    </ul>
  </div>

  <script src="script.js"></script>
</body>

</html>

1 Ответ

0 голосов
/ 25 ноября 2018

Ваша проблема с: 

#sidebar .active {
  left: 0px;
}

Наличие пробела между #sidebar и .active означает, что вы нацеливаетесь на элемент с классом active внутри элемента с идентификатором sidebar.Вместо этого вам нужно нацелиться на элемент, который имеет идентификатор sidebar и класс active.Чтобы указать элемент с классом active и идентификатором sidebar, вам необходимо удалить пробел: 

#sidebar.active {
  left: 0px;
}

См. Рабочий пример ниже: 

function toggleSideBar() {
  document.getElementById('sidebar').classList.toggle('active');
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  position: relative;
  top: 30px;
  left: 68px;
}

#sidebar {
  position: fixed;
  width: 250px;
  height: 100vh;
  background-color: aqua;
  left: -250px;
}

#sidebar .toggle-btn {
  position: absolute;
  left: 270px;
  top: 20px;
  cursor: pointer;
}

#sidebar .toggle-btn span {
  display: block;
  width: 30px;
  height: 5px;
  background: #000;
  margin-bottom: 5px;
}

#sidebar.active { /* REMOVE THE SPACE ON THIS LINE */
  left: 0px;
}

ul {
  width: 100%;
  margin-top: 50px;
}

li {
  list-style: none;
  padding: 20px 70px;
  border-bottom: 1px solid antiquewhite;
  text-align: center;
}

a {
  text-decoration: none;
  color: rebeccapurple;
  font-family: 'roboto';
  font-size: 1.2rem;
  text-transform: uppercase;
  font-weight: 900;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Vertical Navigation Bar</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <div id="sidebar">
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/HP_logo_630x630.png" alt="hp_logo" width="100px" height="100px" class="logo" />
    <div class="toggle-btn" onclick="toggleSideBar()">
      <span></span> <span></span> <span></span>
    </div>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Trending</a></li>
      <li><a href="#">Technology</a></li>
      <li><a href="#">Websites</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About Me</a></li>
    </ul>
  </div>

  <script src="script.js"></script>
</body>

</html>
...