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