onclick 스크립트 질문입니다.
본문
현재의 소스상태입니다.
최신글 상태로 계층형 슬라이드를 만들기 위해 부모글과 자식글을 따로 지정하여 class를 줬고
각 부모글에 onclick를 줘서 부모의 wr_id와 자식의 wr_1가 같은것만 슬라이드를 해놓은 상황으로
소스를 진행시켰습니다.
이후 마지막 작업으로 해당 부모글을 클릭 시 열려있던 자식들의 글이 다 사라져야하는데
계속 소스가 꼬이기만하고 답이 나오질않네요... 뭔가 쉽게 풀릴줄알았는데 막혀서 고수분들의
조언을 듣고자 글을 올립니다. 위의 div부분의 onclick 소스를 어떻게 짜면 나올꺼같은데 머리가
돌아가질않네요 ㅜ 부탁드리겠습니다.
<ul>
<div class= "top" onclick="showRe()">
<?php
if($is_admin) {
if(!$list[$i]['wr_reply']){
echo "<a target='iframe_show' id='latest_st' onclick='showRe(".$list[$i]['wr_id'].")' class='Top' href=\"".$list_href."\">";
echo " ".$list[$i]['subject']." ".$reply_cnt."<a target='iframe_show' class='first_re' href='".$reply_href."'>추가</a>";
}
} else {
if(!$list[$i]['wr_reply']){
echo "<a target='iframe_show' id='latest_st' onclick='showRe(".$list[$i]['wr_id'].")' class='Top' href=\"".$list_href."\">";
echo " ".$list[$i]['subject']." ".$reply_cnt."";
}
}
echo "</a>";
?>
</div>
<li>
<?php
//답변글만 출력
if($is_admin){
if($list[$i]['wr_reply']){
echo "<a target='iframe_show' onclick='showRe(".$list[$i]['wr_id'].")' class='re".$list[$i]['wr_1']." re' id='latest_re' href=\"".$list[$i]['href']."\" > ".$list[$i]['icon_reply']." ";
echo $list[$i]['subject']." ".$reply_cnt_re."";
//echo "</a><a target='iframe_show' class='re".$list[$i]['wr_1']." re' id='second_re' href='".$reply_href."'>추가</a>";
}
}
else{
if($list[$i]['wr_reply']){
echo "<a target='iframe_show' onclick='showRe(".$list[$i]['wr_id'].")' class='re".$list[$i]['wr_1']." re' id='latest_re'href=\"".$list[$i]['href']."\" >".$list[$i]['icon_reply']." ";
echo $list[$i]['subject']." ".$reply_cnt_re."";
echo "</a>";
}
}
?>
</li>
</ul>
답변 4
자식들 div 에 class 를 줘서 클릭시 자식창이 모두 닫히게 하세요.
스크립트를 줘서 변수에 따라 할수도 있지만 해당 스크립트를 이해하지 못한 상황에서
무작정 스크립트를 사용하면 추후 문제가 생길때 멘붕옵니다.
그러니 조금 무식하더라도 기본 자바스크립트 함수로 응용해서 해보세요.
<a onclick="
$('.자식class',부모창ID.document).css('display','none');
$부모글 클릭시 스크립트;
" >부모글클릭</a>
이런식으로 부모글 클릭시 모든 자식창을 닫게 하는 명령어 다음
부모글 클릭시 스크립트를 실행하는 방법으로 하시면됩니다.
부모창과 자식창이 같은 장소에 있다면
$('.자식class',부모창ID.document).css('display','none'); 이게 아니라
$('.자식class').css('display','none'); 요로케 해주세요.
스크립트가 중복되더라도 가장 마지막에 실행된게 우선입니다.
<a onclick="
$('.자식class',부모창ID.document).css('display','none');
$('.자식class',부모창ID.document).css('display','block');
" >부모글클릭</a>
위 스크립트에서 div 의 diplay 를 컨트롤 하는데 가장 마지막이 block 이므로
div 는 block 됩니다.
정리해서 말하자면 열때는 id 로 여시고 닫을때는 class 로 닫으세요
$('.자식class',부모창ID.document).css('display','none');
$('#자식id',부모창ID.document).css('display','none');
그리고 제이쿼리를 사용안하고 그냥 자바스크립트로 하고싶으시면
document.getElementById('아이디').style.display='block';
요론식으로 하세요.
맨처음에 id로 자식들을 열려고 했는데 스크립트를 사용해서 여니깐 많은 자식들중에 첫번째 자식만 보이더라구요 ㅜ show나 sildeDown등을 써도 전부 다 첫번째 자식만 열리던데요 ㅜ
<ul>
<?php
if($is_admin) {
if(!$list[$i]['wr_reply']){
echo "<div class='top' onclick='showRe(".$list[$i]['wr_id'].")'><a target='iframe_show' id='latest_st' href=\"".$list_href."\">";
echo " ".$list[$i]['subject']." ".$reply_cnt."<a target='iframe_show' class='first_re' href='".$reply_href."'>추가</a>";
echo "</a></div>";
}
} else {
if(!$list[$i]['wr_reply']){
echo "<div class='top' onclick='showRe(".$list[$i]['wr_id'].")'><a target='iframe_show' id='latest_st' href=\"".$list_href."\">";
echo " ".$list[$i]['subject']." ".$reply_cnt."";
echo "</a></div>";
}
}
?>
<li>
<?php
//답변글만 출력
if($is_admin){
if($list[$i]['wr_reply']){
echo "<div onclick='showRe(".$list[$i]['wr_id'].")' class='re".$list[$i]['wr_1']." re' ><a target='iframe_show' id='latest_re' href=\"".$list[$i]['href']."\" > ".$list[$i]['icon_reply']." ";
echo $list[$i]['subject']." ".$reply_cnt_re."";
echo "</a></div>";
}
}
else{
if($list[$i]['wr_reply']){
echo "<div onclick='showRe(".$list[$i]['wr_id']." )' class='re".$list[$i]['wr_1']." re' ><a target='iframe_show' id='latest_re'href=\"".$list[$i]['href']."\" >".$list[$i]['icon_reply']." ";
echo $list[$i]['subject']." ".$reply_cnt_re."";
echo "</a></div>";
}
}
?>
</li>
</ul>
<script>
function showRe(no) {
$('.re'+no).slideToggle();
$('.re'+no).nextUntil('.top').hide();
}
</script>
현재 수정한 소스입니다. 최신글 뽑아올때 배열을 기준으로 하다보니 각각의 클래스를 줄수가 없습니다.
부모글이 되는 원글들도 하나의 class로 선언이 되고 자식이 되는 답변 글들도 전부 하나의 class로
선언이 되어있는 상태라 만약 그누초보님 말씀대로 스크립트를 하게 된다면 1번의 자식글을 hide시켜야하는 순간이 오게 될때 1번 원글과 2번 원글이 같은 클래스기 때문에 2번의 자식도 hide가 되거나 display가 none이 되는 상황이 옵니다. 그래서 다른 예제도 보고 수정한 결과 구조면에서 거의 똑같이 소스를 구현을 했는데도 맨밑의 스크립트 $('.re'+no).nextUntil('.top').hide(); 부분이 작동이 되질않네요...
<ul>
<div id="post1" class="topParent" onclick="showRe(44)">
부모의 부모
</div>
<li>
<div id="post4" class="re44 re" style="margin-left: 10px;" onclick="showRe(10)">
부모
</div>
<div id="post5" class="re10 re" style="margin-left: 20px;">
자식
</div>
</li>
<div id="post2" class="topParent" onclick="showRe(2)">
부모의 부모
</div>
<li>
<div id="post6" class="re2 re" style="margin-left: 10px;" onclick="showRe(6)">
부모
</div>
<div id="post7" class="re6 re" style="margin-left: 20px;">
자식
</div>
</li>
</UL>
<script>
function showRe(no) {
$('.re' + no).slideToggle();
$('.re' + no).nextUntil('.topParent').hide();
}
</script>
다른게 없는거 같은데... 정말 난감합니다.. ㅜ
스크립트 소스가 없네요.. ^^;;
아 죄송합니다 스크립트 소스를 올리질 않았네요 ㅜㅜ
<div class="top" onclick=" this.nextElementSibling.style.display = (this.nextElementSibling.style.display=='none') ? 'block' : 'none'; ">
자식들이 많다면 id 로 열지 마시고 class 로 열어보세요.
