게시판 리스트에서 내용 슬라이드 하고싶습니다.
본문
게시판 리스트 부분을 수정하고있습니다.
<thead>
<tr>
<th>박스번호</th>
<th>주문날짜</th>
<th>고객명</th>
<th>주소</th>
</tr>
<tr>
<td>
<?php
echo $list[$i]['icon_reply'];
if ($is_category && $list[$i]['ca_name']) {
?>
<a href="<?php echo $list[$i]['ca_name_href'] ?>" class="bo_cate_link"><?php echo $list[$i]['ca_name'] ?></a>
<?php } ?>
<a href="<?php echo $list[$i]['href'] ?>">
Box<?php echo $list[$i]['subject'] ?>
</a>
</td>
<td><?php echo $list[$i]['wr_1'] ?></td>
<td><?php echo $list[$i]['wr_2'] ?></td>
<td><?php echo $list[$i]['wr_3'] ?></td>
</tr>
<?php if (count($list) == 0) { echo '<tr><td colspan="12" class="empty_table">게시물이 없습니다.</td></tr>'; } ?>
</thead>
<tbody>
<tr>
<th>전화번호</th>
<th>우편번호</th>
<th>무게</th>
<th>금액</th>
</tr>
<tr>
<td><?php echo $list[$i]['wr_4'] ?></td>
<td><?php echo $list[$i]['wr_5'] ?></td>
<td><?php echo $list[$i]['wr_7'] ?></td>
<td>¥<?php echo $list[$i]['wr_8'] ?></td>
</tr>
<tr>
<th colspan="4">물품내역</th>
</tr>
<tr>
<td colspan="4"><?php echo $list[$i]['wr_content'] ?></td>
</tr>
<tr>
<th colspan="2">운송장번호</th>
<th colspan="2">발송상태</th>
</tr>
<tr>
<td colspan="2"><?php echo $list[$i]['wr_6'] ?></td>
<td colspan="2"><?php echo $list[$i]['wr_9'] ?></td>
</tr>
</tbody>
이렇게 묶어놨는데
tbody 부분을 아코디언처럼 접었다 폈다 하고싶습니다.
일반적으로 클래스먹여서 스크립트로 접었다폈다하니까
게시물이 늘어남에따라 클래스명이 같아서 한번펼치면 전부다 같이 펼쳐지더라구요 ㅠㅠ
어떻게 방법이 없을까요~?
답변 2
늘어났다 줄었다는 만들었다고 하시니..
$(".클래스명") 으로 효과 주지마시고,
$(this)로 하시면, 해당 부분만 되실거에요^^
$(function(){
$(".클래스명").on('click',function(){
$(this).원하시는 명령;
});
});
감사합니다^^!! 위에 포문이 돌고있어서 포문끌어다가 id(포문)으로 만들었어요 ㅠㅠ 간단한거였는데 답변보고 곰곰히 생각하다가 생각났네요
어떻게 푸셨어도 해결하셔서 다행입니다^^
리스트에서 토글 원리는 해당 게시물 당 요소 id 값이 달라야 각 게시물을 따로 따로
인식하므로 해당 게시물에 연결된 hide 부분만 각각 노출 됩니다.
그리고 아래 스크립트는 for 문 하위에 들어가야 각각 id값을 인식 합니다.
아래 스크립트 참고하시면 됩니다.
-- html --
<div id="click_<?php echo $list[$i]['wr_id'] ?>">클릭</div>
<div id="viewer_<?php echo $list[$i]['wr_id'] ?>" class="viewer">감춰진 내용</div>
-- 스크립트 --
<script>
$(document).ready(function() {
var $cl = click_<?php echo $list[$i]['wr_id'] ?>;
var $view = viewer_<?php echo $list[$i]['wr_id'] ?>;
$('.viewer').hide();
$($cl).click(
function()
{
$($view).slideToggle(1);
});
});
</script>
