javascript에서 onclick버튼이 한번만 작동하는 이유가 무엇일까요??

class속성을 이용해서 버튼을 누르면 메뉴바가 나타나고 사라지는 연습문제를 풀어보았는데 버튼을 누르면 처음에는 동작하는데 다음에는 동작하지 않습니다ㅠ 무엇이 문제일까요ㅠㅠ

코드입니다▼

<!DOCTYPE html> Page 3D

    header{
        width: 600px;
        height: 190px;
        border: 1px solid #ccc;
        background: #ccc;
    }

    #toggle{
        position: absolute;
        left: 400px;
        top: 90px;
        outline: none;
        background: #666;
        color: white;
        font-size: 20px;
        padding: 0 5px;
        text-decoration: none;
    }
    #toggle:hover{text-decoration: underline; }

    #gnb.active{
        height: 190px;
    }
    #gnb{
        width: 200px;
        height: 0px;
        overflow: hidden;
        border-bottom: 1px solid #666;
        border-top: 1px solid #ccc;
        box-sizing: border-box;
        transition-duration: 0.5s;
    }
</style>

app title toggle

    <nav class="active" id="gnb">
        <div><a href="#" class="menu">Home</a></div>
        <div><a href="#" class="menu">Profolio</a></div>
        <div><a href="#"class="menu">Contact</a></div>
    </nav>

var toggle = document.getElementById('toggle');
var gnb = document.getElementById('gnb');
var attr = gnb.getAttribute('class');

toggle.onclick = function(){

    if (attr == 'active'){
        gnb.removeAttribute('class');
        return false;

    }else{
        gnb.setAttribute('class','active');
        return false;
    }
}

1답변

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

작성한 답변에 다른 개발자들이 댓글을 작성하거나 댓글에 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.