(수정) li 클릭 시, 하위분류가 나타나는 법
관련링크
본문
링크된 사이트(사람인피씨버전-지역별 페이지) 처럼 각 지역을 클릭하면 하위분류(상세지역) 나타나게 하고 싶습니다.
(다른 지역을 클릭하면 거기에 해당하는 하위분류가 나타날수 있게끔)
이 방법 해결이 안되서 한참을 테스트하고 있는데 기존의 소스에서 해당기능을 추가할 수 있을까요~?
<style>
.kcr_map .kcrlist { position:relative; width:350px; height:500px; /*margin:0 26px 10px 26px;*/ background:url(http://img.icross.co.kr/icross/2016/bg/bg_map.png) /*-10px -70px*/ no-repeat; margin-left:2%}
.kcr_map .kcrlist .kcrlist_view ul li a { display:inline-block; position:absolute; width:38px;/* height:14px;*/ padding:3px 0 5px; background:#fff; border:1px solid #d2d2d2; overflow:hidden; color:#222; font:bold 12px 'malgun gothic'; text-align:center;}
/**:first-child+html .kcr_map .kcrlist .kcrlist_view ul li a { font-size:0; text-indent:0; line-height:0; }*/
.kcr_map .kcrlist .kcrlist_view ul li .seoul { top:97px; left:59px; }
.kcr_map .kcrlist .kcrlist_view ul li .gyeonggi { top:130px; left:105px;}
.kcr_map .kcrlist .kcrlist_view ul li .gangwon { top:85px; left:195px;}
.kcr_map .kcrlist .kcrlist_view ul li .chungbuk { top:185px; left:150px;}
.kcr_map .kcrlist .kcrlist_view ul li .chungnam { top:180px; left:65px;}
.kcr_map .kcrlist .kcrlist_view ul li .jeonbuk { top:265px; left:112px;}
.kcr_map .kcrlist .kcrlist_view ul li .jeonnam { top:350px; left:90px;}
.kcr_map .kcrlist .kcrlist_view ul li .gyeongbuk { top:200px; right:90px;}
.kcr_map .kcrlist .kcrlist_view ul li .gyeongnam { top:300px; right:116px;}
.kcr_map .kcrlist .kcrlist_view ul li .jeju { top:430px; left:67px;}
.kcr_map .kcrlist .kcrlist_view ul li .foreign { top:305px; right:63px;}
.kcr_map .kcrlist .kcrlist_view ul li a:hover { color:#fff; background-color:#3e4959; border-color:#3e4959; text-decoration:none; -o-transition: border-color 0.2s ease-out; -ms-transition: border-color 0.2s ease-out; -moz-transition: border-color 0.2s ease-out;-webkit-transition: border-color 0.2s ease-out; transition: border-color 0.2s ease-out;}
</style>
<div class="kcr_map">
<div class="kcrlist">
<div class="kcrlist_view">
<ul>
<li id="seoul" class="map_sido"><a class="seoul" href="#">서울</a></li>
<li id="gyeonggi" class="map_sido"><a class="gyeonggi" href="#">경기</a></li>
<li id="gangwon" class="map_sido"><a class="gangwon" href="#">강원</a></li>
<li id="chungbuk" class="map_sido"><a class="chungbuk" href="#">충북</a></li>
<li id="chungnam" class="map_sido"><a class="chungnam" href="#">충남</a></li>
<li id="jeonbuk" class="map_sido"><a class="jeonbuk" href="#">전북</a></li>
<li id="jeonnam" class="map_sido"><a class="jeonnam" href="#">전남</a></li>
<li id="gyeongbuk" class="map_sido"><a class="gyeongbuk" href="#">경북</a></li>
<li id="gyeongnam" class="map_sido"><a class="gyeongnam" href="#">경남</a></li>
<li id="jeju" class="map_sido"><a class="jeju" href="#">제주</a></li>
</ul>
</div>
</div>
</div>
답변을 작성하시기 전에 로그인 해주세요.
