У меня проблема с кнопкой переключения. Всякий раз, когда я нажимаю на кнопку переключения, функция не отвечает и не переходит в перекрестный знак? - PullRequest
Новая
       6

У меня проблема с кнопкой переключения. Всякий раз, когда я нажимаю на кнопку переключения, функция не отвечает и не переходит в перекрестный знак?

1 голос
/ 25 апреля 2020

Я создал кнопку переключения и добавил функцию, с помощью которой при нажатии на кнопку переключения она должна измениться на знак пересечения, при котором c я добавил через Css. Но я не понимаю, это не работает? Мой код здесь HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="style.css">
<title>Navbar Toggle</title>
</head>
<body>
<div class="container">
    <div class="navbar">
        <ul>
            <li class="toggle">
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3"></div>
            </li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Trends</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</div>


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

CSS

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

body {
  background-color: #333945;
}

.navbar {
  background-color: #019031;
  color: white;
}

.navbar ul {
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  list-style-type: none;
}

.navbar ul a {
  font-size: 5vh;
  display: block;
  color: white;
  text-decoration: none;
  display: block;
  padding: 25px;
}

.navbar ul a:hover {
  background-color: #333945;
}

.toggle {
  display: inline-block;
  cursor: pointer;
}

.toggle .bar1, .toggle .bar2, .toggle .bar3 {
  width: 35px;
  height: 5px;
  background-color: whitesmoke;
  margin: 6px 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.change {
  display: inline-block;
  cursor: pointer;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
          transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
          transform: rotate(45deg) translate(-8px, -8px);
}

JavaScript

let toggle = document.getElementsByClassName("toggle");

toggle.addEventListener("click",myToggle,false);

function myToggle(){
    toggleElement.classList.toggle("change"); 
}

Вот и весь код. Пожалуйста, помогите мне в этой проблеме. Я новичок в Javascript.

Ответы [ 2 ]

1 голос
/ 25 апреля 2020

Поскольку результат, возвращаемый getElementsByClassName, является коллекцией нодлистов, вам необходимо получить отдельный доступ к членам этой коллекции, чтобы назначить обработчик событий. Если на странице было несколько элементов, соответствующих этому className, приведенный ниже фрагмент кода назначил бы обработчик события click каждому. 

Array.from( document.getElementsByClassName("toggle") ).forEach( bttn=>{
	bttn.addEventListener('click',function(e){
		this.classList.toggle('change')
	});
})
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

body {
  background-color: #333945;
}

.navbar {
  background-color: #019031;
  color: white;
}

.navbar ul {
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  list-style-type: none;
}

.navbar ul a {
  font-size: 5vh;
  display: block;
  color: white;
  text-decoration: none;
  display: block;
  padding: 25px;
}

.navbar ul a:hover {
  background-color: #333945;
}

.toggle {
  display: inline-block;
  cursor: pointer;
}

.toggle .bar1, .toggle .bar2, .toggle .bar3 {
  width: 35px;
  height: 5px;
  background-color: whitesmoke;
  margin: 6px 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.change {
  display: inline-block;
  cursor: pointer;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
          transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
          transform: rotate(45deg) translate(-8px, -8px);
}
<div class="container">
    <div class="navbar">
        <ul>
            <li class="toggle">
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3"></div>
            </li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Trends</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</div>

Вместо того, чтобы использовать getElementsByClassName, вы можете получить доступ к отдельному элементу, используя вместо этого querySelector: например: 

document.querySelector('li.toggle').addEventListener('click',function(e){/*as before*/})
1 голос
/ 25 апреля 2020

С вашим кодом есть две проблемы:

  1. Вам необходимо получить первый элемент из getElementsByClassName, например, let toggle = document.getElementsByClassName("toggle")[0]. Или вы также можете сделать let toggle = document.querySelector(".toggle")
  2. Вы звоните toggleElement.classList.toggle("change"), но вы назвали элемент toggle, поэтому вам придется изменить на toggle.classList.toggle("change")

Тогда это должно работать, см. Ниже: 

let toggle = document.getElementsByClassName("toggle")[0];

toggle.addEventListener("click", myToggle, false);

function myToggle() {
  toggle.classList.toggle("change");
}
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

body {
  background-color: #333945;
}

.navbar {
  background-color: #019031;
  color: white;
}

.navbar ul {
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  list-style-type: none;
}

.navbar ul a {
  font-size: 5vh;
  display: block;
  color: white;
  text-decoration: none;
  display: block;
  padding: 25px;
}

.navbar ul a:hover {
  background-color: #333945;
}

.toggle {
  display: inline-block;
  cursor: pointer;
}

.toggle .bar1,
.toggle .bar2,
.toggle .bar3 {
  width: 35px;
  height: 5px;
  background-color: whitesmoke;
  margin: 6px 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.change {
  display: inline-block;
  cursor: pointer;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}
<div class="container">
  <div class="navbar">
    <ul>
      <li class="toggle">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
      </li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Trends</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...