테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

이렇게하면 toggle클래스 적용이 안되나요?

나은영 4년 전 조회 4,827
답변 1
목록

<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을 못받아먹네요... 어떻게 구현해야하는지 조언받을수 있을까요ㅠㅠ

#javascript #햄버거버튼
댓글을 작성하려면 로그인이 필요합니다.

답변 1개

세크티
세크티
4년 전

일단 스타일을 아래처럼 바꿔주시고

<style>
.menu{
  display:none;
}
.menu.on{
  display:block;
}
</style>

 

스크립트를 아래처럼 해보세요

<script>
  $(document).ready(function(){
    $(".menu_btn").click(function(){
      $(this).toggleClass("on");
    });
  });
</script>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인