토글 버튼에 문제가 있습니다. 토글 버튼을 클릭 할 때마다 기능이 응답하지 않고 십자 기호로 변경되지 않습니까?

debugcn 에 게시 Dev

구르 키 란 싱 |

나는 토글 버튼을 만들었고 토글 버튼을 클릭하면 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);
}

자바 스크립트

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

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

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

그것이 모든 코드입니다. 이 문제에서 저를 도와주세요. Javascript를 처음 사용합니다.

Abronsius 교수

에서 반환 된 결과 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*/})

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사