닫기 버튼 없이도 토글하면 사라지고, 다른영역 클릭시 사라지는 전체보기 메뉴 > 그누보드5 팁자료실

그누보드5 팁자료실

닫기 버튼 없이도 토글하면 사라지고, 다른영역 클릭시 사라지는 전체보기 메뉴 정보

닫기 버튼 없이도 토글하면 사라지고, 다른영역 클릭시 사라지는 전체보기 메뉴

본문

<style>
    #gnb_all{width:100%;height:30%; background:red; display:none; position:absolute; color:#fff; z-index:99999; text-align:center; margin:0px auto}
    .gnb_menu_btn{width:300px; margin:0 auto; cursor:pointer; text-align:center; padding:10px; border-radius:5px; border:solid 1px #ddd}
</style>

<div class="gnb_menu_btn">버튼을 누르세요</div>
<div id="gnb_all">something I want to show</div>

<script>//닫기 버튼 없이도 토글하면 사라지고, 다른영역 클릭시 사라지는 전체보기 메뉴
  $(document).ready(function(){
      $('.gnb_menu_btn').click(function(event){
          event.stopPropagation();
           $("#gnb_all").slideToggle("slow");
      });
      $("#gnb_all").on("click", function (event) {
          event.stopPropagation();
      });
  });
  $(document).on("click", function () {
      $("#gnb_all").hide();
  });
</script>

추천
6
  • 복사

댓글 5개

© SIRSOFT
현재 페이지 제일 처음으로