동적으로 생성되는 아코디언 메뉴를 구현중인데요 기본적 아코디언메뉴가 3~4개 정도 나와있고
추가적으로 ADD를 클릭할 경우 아코디언메뉴가 1개씩 늘어나는 코드구현 중입니다.
<script type="text/javascript">
$(function(){
$(".submenu").hide();
$(".name").click(function(){
$(".submenu:visible").slideUp("middle");
$(this).next('.submenu:hidden').slideDown("middle");
return false;
})
});
function createInput(){
var para = document.createElement('div');
para.innerHTML=document.getElementById('addaccordion').innerHTML;
document.getElementById('field').appendChild(para);
}
function removeInput(obj){
document.getElementById('field').removeChild(obj.parentNode);
}
</script>
<div id="accordion">
<h3 class="name">1차메뉴</h3>
<ul class="submenu">
<li><a href="#">1차 서브메뉴</a></li>
<li><a href="#">1차 서브메뉴</a></li>
<li><a href="#">1차 서브메뉴</a></li>
</ul>
<p class="name">2차메뉴</p>
<ul class="submenu">
<li><a href="#">2차 서브메뉴</a></li>
<li><a href="#">2차 서브메뉴</a></li>
<li><a href="#">2차 서브메뉴</a></li>
</ul>
<p class="name">3차메뉴</p>
<ul class="submenu">
<li><a href="#">3차 서브메뉴</a></li>
<li><a href="#">3차 서브메뉴</a></li>
<li><a href="#">3차 서브메뉴</a></li>
</ul>
</div>
<div id="addaccordion">
<h3 class="name"> Added </h3>
<ul class="submenu">
<p> test</p>
</ul>
</div>
<div id="field"></div>
<span>
<div onclick="createInput()" > add </div>
</span>
</div>
이러한 방향으로 가고 있는데요.. 도무지 어떻게 해결을 해야할지 모르겠네요 ㅜ
어떤식으로 방향을 잡아야 할까요?? 도와주세요 ㅜ
본인삭제금지
글쓰기