제가 아직 미숙한부분이 많아 

근무하는곳에 경력직없이 일하고있어 질문할곳이 마땅치 않아서 질문남깁니다..

쇼핑몰 다듬고있는중에 

레이아웃만 만지다가 

제이쿼리를 사용하여 이벤트를 주려했는데 아예 반응조차 안되어서 .. 

미치겠습니다 ㅠㅠ

클릭하면 배경이 덮히고 div를 띄우고싶은데 혹시 어떻게 해야될까요?

html 소스

 <!--@css(/css/material.css)-->
     <!--@js(/js/material.js)-->

  <div id="material_btn">

 <img src="" alt=""/> 

 <p>소재별 세탁방법<.p>

</div>
    <div id="material_wrap">
        <h2 class="hidden"></h2>
            <div id="material_close_btn">

             <img src="" alt=""/> 
            </div>

           <div>

            <ul id="material_list">  
              <li></li>

              <li></li>

              <li></li>
           </ul>
        </div>
        </div>
        
        
    </div>

js 

$(document).ready(function(){

    materialOn()

    
function materialOn(){
    var $materialBtn
    var $materialWrap
    var $materialbg
    var $header
   
    Menuinit()
    $materialBtn.on("click",subMenuOn)
    $materialWrap.on("click",subMenuOff)
   

       function Menuinit(){

      $materialBtn=$("#material_butten")
      $materialWrap=$("#material_wrap")
      $materialbg=$("#material_bg")
  

}

      
    function subMenuOn(){
       $materialbg.css({"display":"block"})
        $materialWrap.css({"display":"block"})
        
        
    }
    function subMenuOff(){
        // 미완성
    }
    }
 })

제가 못하는 거라 아예 틀려서 안먹히는걸까요?

아직 이벤트 효과같은것도 못주었는데 미칠것같습니다 ㅠ...