jQuery에서 스마트 폰용 메뉴를 클릭했을 때 메뉴 이외의 영역을 클릭했을 때 메뉴를 닫도록하고 싶습니다.

이 사이트에서 ✕ 버튼으로만 메뉴가 닫히는 것은 불편.


메뉴 이외를 클릭했을 때 이런 느낌으로 닫고 싶다.

구현

이번 사이트는 WordPress로 만들었으므로 테마에 따라 코드를 추가해야합니다.

그래서 dev 모드에서 코드를 보면 햄버거 메뉴를 클릭하면 menu-toggle 네.

//メニューが閉じてるとき
<div class="menu-toggle">

//メニューを開いてるとき
<div class="menu-toggle active">

그래서 메뉴 밖을 클릭하면 menu-toggle 부분에서 active를 제거하는 코드를 기재하면 OK입니다.

  jQuery(document).ready(function($) {
    var nav = $('.menu-toggle');
    $('.main-section').click(function() {
     //ここでnavの部分がactiveクラスを持っているか確認
      if(nav.hasClass('active')) {
        $('.menu-toggle').removeClass('active');
      }
    });
  });

jQuery(document).ready(function($) 왜냐하면 사이트의 HTML을 완전히 읽은 다음이 jQuery를 실행하고 싶기 때문입니다.