클릭시 클래스 추가되게 ... 도와주세요.

좌측 슬라이드 메뉴를 만들고 있습니다. 메뉴버튼 slide_btn 클릭시 바디에 slide_on 클래스가 추가되어 사이드메뉴가 열리게 하고싶고, #dim 영역 클릭시 사이드메뉴가 닫히고 바디에 slide_on 클래스가 감춰지게 하고싶은데 잘 안됩니다...ㅠ_ㅠ 제가 왕초보라 그렇겠지만 몇일을 씨름하고 있는데 쉽지않네요. 고수님들 ... 도움 부탁드립니다.

<style type="text/css">

body.slide_on .slide_menu_w {
    left: 0;
}
body.slide_on #dim {
    display: block!important;
}
</style>

<script>
var slide_menu_w = false; 
$(document).ready(function() {
  
    $(".slide_menu_w, .close-menu1, .close-menu2,slide_menu_w").on("click", function() {
        if(slide_menu_flag) { 
            $("body").removeClass("slide_on"); 
            $("#slide_menu").removeClass("slide_on");
        } else { 
            $("body").addClass("slide_on"); 
            $("#slide_menu").addClass("slide_on");
        }
        slide_menu_flag = !slide_menu_flag; 
    });
});
</script></p>

<div id="wrap">
<div class="slide_menu_w">
<div class="sm_title ">&nbsp;</div>

<div class="sm_title ">&nbsp;</div>

<ul>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
</ul>
</div>

<div id="bg" style="display: none;">&nbsp;</div>

<div id="header" style="top:38px;"><button class="slide_btn" type="button"></button></div>
</div>