제이쿼리 클릭했을때 슬라이드 이벤트 질문이용!
본문
안녕하세요! 초보 퍼블리셔입니다!
화살표 누르면 아래 내용이 스르륵 펼쳐지는 카드형태인데
하나를 누르면 나머지 카드의 내용들도 다 펼쳐져버립니다 .ㅠㅠ
하나당 해당 내용이 펼쳐지게 바꾸고싶은데 도움좀 부탁드리겠습니다 ..!
$(document).ready(function(){
$(".card_detal__btn").click(function(){
event.stopPropagation();
var submenu = $(".media-content__detail");
if( submenu.is(":visible") ){
$(".card_detal__btn").css("transform","rotate(0deg)");
submenu.slideUp();
}else{
$(".card_detal__btn").css("transform","rotate(180deg)");
submenu.slideDown();
}
});
});
<section class="container is-max-desktop afms-wrap afms-wrap__input">
<div class="pt-5">
<div class="box afms-box" onClick="">
<article class="is-relative">
<div class="media-content mb-3">
<div class="content mb-3">
<div class="is-flex is-align-items-center">
<span class="afms_tag1">영선</span>
<span class="card_title mt-0 ml-1">정기회의 회의록</span>
<a class="card_arrow" id="arrowBtn">
<span class="iconify card_detal__btn" data-icon="bi:chevron-down" style="font-size: 28px; color: #000;"></span>
</a>
</div>
<p class="has-text-grey-light mt-1">HOW0021-A1</p>
</div>
<div class="content is-inline-block mr-5 mb-0" >
<p class="card_detail">
<span class="tit has-text-black-bis is-block">합계수량</span><span class="txt is-block" style="font-size: 15px; font-weight: 800">2,795㎡</span>
</p>
</div>
<div class="content is-inline-block mb-0" >
<p class="card_detail">
<span class="tit has-text-black-bis is-block">권장 내구연한</span><span class="txt is-block" style="font-size: 15px; font-weight: 800">10년</span>
</p>
</div>
</div>
<div class="media-content media-content__detail mb-3 hide">
<table class="table is-fullwidth has-text-centered">
<thead>
<tr>
<th>위치</th>
<th>세부위치</th>
<th>수량</th>
<th>수량</th>
</tr>
</thead>
<tfoot>
<tr>
<td>201동</td>
<td>복도</td>
<td>15,000㎡</td>
<td><span class="afms_tag1 detailBtn">상세</span></td>
</tr>
<tr>
<td>201동</td>
<td>복도</td>
<td>15,000㎡</td>
<td><span class="afms_tag1 detailBtn">상세</span></td>
</tr>
<tr>
<td>201동</td>
<td>복도</td>
<td>15,000㎡</td>
<td><span class="afms_tag1 detailBtn">상세</span></td>
</tr>
</tbody>
</table>
</div>
</article>
</div>
<div class="box afms-box" onClick="">
<article class="is-relative">
<div class="media-content mb-3">
<div class="content mb-3">
<div class="is-flex is-align-items-center">
<span class="afms_tag1">영선</span>
<span class="card_title mt-0 ml-1">정기회의 회의록</span>
<a class="card_arrow" id="arrowBtn">
<span class="iconify card_detal__btn" data-icon="bi:chevron-down" style="font-size: 28px; color: #000;"></span>
</a>
</div>
<p class="has-text-grey-light mt-1">HOW0021-A1</p>
</div>
<div class="content is-inline-block mr-5 mb-0" >
<p class="card_detail">
<span class="tit has-text-black-bis is-block">합계수량</span><span class="txt is-block" style="font-size: 15px; font-weight: 800">2,795㎡</span>
</p>
</div>
<div class="content is-inline-block mb-0" >
<p class="card_detail">
<span class="tit has-text-black-bis is-block">권장 내구연한</span><span class="txt is-block" style="font-size: 15px; font-weight: 800">10년</span>
</p>
</div>
</div>
<div class="media-content media-content__detail mb-3 hide">
<table class="table is-fullwidth has-text-centered">
<thead>
<tr>
<th>위치</th>
<th>세부위치</th>
<th>수량</th>
<th>수량</th>
</tr>
</thead>
<tfoot>
<tr>
<td>201동</td>
<td>복도</td>
<td>15,000㎡</td>
<td><span class="afms_tag1 detailBtn">상세</span></td>
</tr>
<tr>
<td>201동</td>
<td>복도</td>
<td>15,000㎡</td>
<td><span class="afms_tag1 detailBtn">상세</span></td>
</tr>
<tr>
<td>201동</td>
<td>복도</td>
<td>15,000㎡</td>
<td><span class="afms_tag1 detailBtn">상세</span></td>
</tr>
</tbody>
</table>
</div>
</article>
</div>
<div class="box afms-box" onClick="">
<article class="is-relative">
<div class="media-content mb-3">
<div class="content mb-3">
<div class="is-flex is-align-items-center">
<span class="afms_tag1">영선</span>
<span class="card_title mt-0 ml-1">정기회의 회의록</span>
<a class="card_arrow" id="arrowBtn">
<span class="iconify card_detal__btn" data-icon="bi:chevron-down" style="font-size: 28px; color: #000;"></span>
</a>
</div>
<p class="has-text-grey-light mt-1">HOW0021-A1</p>
</div>
<div class="content is-inline-block mr-5 mb-0" >
<p class="card_detail">
<span class="tit has-text-black-bis is-block">합계수량</span><span class="txt is-block" style="font-size: 15px; font-weight: 800">2,795㎡</span>
</p>
</div>
<div class="content is-inline-block mb-0" >
<p class="card_detail">
<span class="tit has-text-black-bis is-block">권장 내구연한</span><span class="txt is-block" style="font-size: 15px; font-weight: 800">10년</span>
</p>
</div>
</div>
<div class="media-content media-content__detail mb-3 hide">
<table class="table is-fullwidth has-text-centered">
<thead>
<tr>
<th>위치</th>
<th>세부위치</th>
<th>수량</th>
<th>수량</th>
</tr>
</thead>
<tfoot>
<tr>
<td>201동</td>
<td>복도</td>
<td>15,000㎡</td>
<td><span class="afms_tag1 detailBtn">상세</span></td>
</tr>
<tr>
<td>201동</td>
<td>복도</td>
<td>15,000㎡</td>
<td><span class="afms_tag1 detailBtn">상세</span></td>
</tr>
<tr>
<td>201동</td>
<td>복도</td>
<td>15,000㎡</td>
<td><span class="afms_tag1 detailBtn">상세</span></td>
</tr>
</tbody>
</table>
</div>
</article>
</div>
</div>
</section>
답변 2
$(document).ready(function(){
$(".card_detal__btn").click(function(){
event.stopPropagation();
var submenu = $(this).parent().parent().parent().parent().parent().find(".media-content__detail");
if( submenu.is(":visible") ){
$(this).css("transform","rotate(0deg)");
submenu.slideUp();
}else{
$(this).css("transform","rotate(180deg)");
submenu.slideDown();
}
});
});
이렇게 해보세요.
오오 답변 감사드립니다 !!ㅎㅎ
친절한 답변 감사드립니다 !! 최고최고!
답변을 작성하시기 전에 로그인 해주세요.