이렇게하면 toggle클래스 적용이 안되나요?
본문
<header>
<button class="menu_btn">메뉴열기</button>
</header>
<nav class="menu">
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
</nav>
<style>
.menu{
display:none;
}
.menu_on{
display:block;
}
</style>
<script>
$(document).ready(function(){
$(".menu_btn").click(function(){
$(this).toggleClass(".menu_on");
});
});
</script>
햄버거버튼 구현하려하는데 header에 있는 버튼에 toggle클래스 적용했더니 nav가 display block을 못받아먹네요... 어떻게 구현해야하는지 조언받을수 있을까요ㅠㅠ
답변 1
일단 스타일을 아래처럼 바꿔주시고
<style>
.menu{
display:none;
}
.menu.on{
display:block;
}
</style>
스크립트를 아래처럼 해보세요
<script>
$(document).ready(function(){
$(".menu_btn").click(function(){
$(this).toggleClass("on");
});
});
</script>
답변을 작성하시기 전에 로그인 해주세요.