반응형
메뉴 트리를 만들어 봅시다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <body> <span onclick="getSession_click();">여기를 눌러봐요</span> <ul id="ul1"> <li id="li1">1</li> <li id="li2"> <a>2</a> <ul id="ul2" class="dp-none"> <li>a</li> <li> <a>b</a> <ul id="ul4" class="dp-none"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> </ul> </li> <li>c</li> <li>d</li> </ul> </li> <li id="li3"> <a>3</a> <ul id="ul3" class="dp-none"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> </ul> </li> <li id="li4">4</li> <li id="li5">5</li> </ul> </body> | cs |
일단 HTML은 이렇게 만들었습니다
만약 쿼리로 DB에서 메뉴 목록을 가져 온다면 자바스크립트를 이용해서 그려주는 방법을 이용하거나 해야겠죠?!
다음 단계로는 CSS 스타일을 만들어 줍니다.
1 2 3 4 5 6 7 8 9 10 11 | <style type="text/css"> //메뉴를 가려주는 기능 .dp-none{ display : none; } //메뉴를 보여주는 기능 .dp-block{ display : block; } </style> | cs |
만들어준 CSS와 HTML을 종합해 보면 기본적으로 메뉴는 닫혀져 있습니다.
그러면 가장 중요한 JS 코드는 아래와 같이 만들었습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <script type="text/javascript"> $(document).ready(function(){ $("li > a").click(function(){ //li 하위에 있는 a 태그를 누르면 메뉴 토글 효과 var ul = $(this).next("ul"); if(ul.hasClass("dp-block")){ ul.addClass("dp-none"); ul.removeClass("dp-block"); }else{ ul.addClass("dp-block"); ul.removeClass("dp-none"); } }); //세션에 저장이 되어 있는 메뉴리스트를 가져온다. var position = []; //저장할때는 배열로 저장되었는데 불러 올때는 문자열로 불러오는 듯합니다. (이부분은 공부가 더필요할것같습니다.) position = sessionStorage.getItem('menu_save').split(","); for(var i=0;i<position.length;i++){ // 세션을 가져와서 for문으로 저장되어 있던 메뉴들을 열어준다 $("#"+position[i]).addClass("dp-block"); } }); function getSession_click(){ //클릭을 하면 열려 있는 메뉴의 id를 세션에 저장해 준다. var menu_save = []; $("body").find(".dp-block").each(function(i,e){ //body안에 있는 열린 메뉴들의 id를 menu_save라는 배열에 저장한다. var result = $(this).attr("id"); menu_save.push(result); }); //menu_save를 세션에 저장한다. sessionStorage.setItem('menu_save', menu_save); }; </script> | cs |
아마 플러그인과같이 편리한 도구들이 많이 만들어 져서 위와 같은 코드는 사용하지 안을수 있지만
제가 근무하는 은행권 업무는 사실 이러한 도구들이 없는 경우가 많으니 이런 투박한 방법도 고려해 보세요!!!
반응형
'JS' 카테고리의 다른 글
| [JS] Android Chrome 더보기 관련 스크롤이 하단으로 이동하는 경우 (0) | 2021.10.26 |
|---|---|
| [자바스크립트]iScroll.js 사용시 주의 할 점 (0) | 2021.08.03 |
| [자바스크립트] 즉시 실행 함수 표현식 (0) | 2020.10.19 |
| [자바스크립트] Object.defineProperty ? (0) | 2020.10.16 |
| [자바스크립트] prototype (0) | 2020.10.13 |
