제이쿼리 클릭했을때 슬라이드 이벤트 질문이용!

이한나

프로필 보기 이 회원 글보기 이 회원의 댓글보기

4년 전 1,890

안녕하세요! 초보 퍼블리셔입니다!

화살표 누르면 아래 내용이 스르륵 펼쳐지는 카드형태인데

하나를 누르면 나머지 카드의 내용들도 다 펼쳐져버립니다 .ㅠㅠ

하나당 해당 내용이 펼쳐지게 바꾸고싶은데 도움좀 부탁드리겠습니다 ..!

Copy

$(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();

            }

        });

       

    });

Copy

<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개 / 댓글 2개

채택된 답변

+20 포인트

레전드플랫폼

프로필 보기 이 회원 글보기 이 회원의 댓글보기

4년 전

Copy

$(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();
            }
        });
       
    });

이렇게 해보세요.