Jquery sliderToggle 질문 입니다.
본문
<tr>
<td><?php echo $list[$i]['wr_subject';?><button class="click">[서비스 보기]</button></td>
</tr>
<tr class="panel" style="display:none">
<td>
<div>1번라인의 가나다라마바사</div>
</td>
</tr>
<tr>
<td><?php echo $list[$i]['wr_subject';?><button class="click">[서비스 보기]</button></td>
</tr>
<tr class="panel" style="display:none">
<td>
<div>2번라인의 가나다라마바사</div>
</td>
</tr>
....중복
<script>
$(document).ready(function(){
$(".click").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
클릭을 누를 경우 display:none으로 숨겨놓은 내용이 나오게 하고 싶은데..
현재는...클릭을 누르게 되면...전체의 내용들이 열리고 닫히고 합니다.
;;;해당 라인에 있는 클릭을 누를 경우 그 해당 부분만 열람이 되게 하고 싶은데...
이거 어떻게 해야할지 조언 ㅠ 부탁드립니다.
#유니크한 값을 주는거에 대한 개념이 ㅠ 않잡힙니다.
답변 5
$(document).ready(function(){
$(".click").click(function(){
$(this).parent().next(".panel").slideToggle("slow");
});
});
러프하게 생각해본다면
각각 패널이라는 class 에 data-id 값을 주고 data-id 로 체크하는 방법으로 풀어가는게 좋을거 같습니다.
$(function() {
// jquery 1.8.? 버전대에서는 on을 live로 바꿔주세요. 1.11.? 버전에서는 이대로 쓰시면 됩니다.
$(".click").on('click', function() {
// .click 클래스를 가진 엘리먼트 클릭 시, 클릭한 엘리먼트의 인덱스값을 가져옵니다.
var idx = $('.click').index(this);
// .panel 이라는 클래스를 가진 모든 엘리먼트를 감춥니다.
$(".panel").hide();
// 위에서 설정한 인덱스 값을 가져와서 .panel 클래스를 가진 엘리먼트 중, idx 순서인 .panel 인덱스를 보여줍니다.
$(".panel:eq("+idx+")").show();
})
})
회원가입이후 글이 5개이하면 댓글도 못달아서
여기다가 대댓글로 달아요 : )
스크립트 변경한번해보세요 : )
$(function() {
$("div").hide();
$("button.click").on("click", function() {
$("div").slideUp();
$(this).closest("tr").next().find("div").slideDown("slow");
});
});
이전에 열었던 애를 찾으셔도 되고 아니면 전체를 닫았다가 다시 열어도 되고...
그냥 다른 이런 방법도 있다고 보시면 될 듯하네요.
댓글 달아주신 모든 회원님들께 감사의 말씀을드립니다.
김절짱님의 쪽지로 바로 해결했는데, 채택을 드릴 수 없어..ㅠ
모두 좋아요 드리고, 채택은 랜덤 처리하겠습니다. ㅠ
