event.stopPropagation(); 질문! 채택완료
이한나
3년 전
조회 1,813
안녕하세요! 방금도 글올렸었는데 제가 해결못한부분이 있어가지고 ...
각 영역에 클릭이벤트를 해줘야하는데 그안에 있는 .card_detal__btn 여기에도 클릭이벤트를 해주어야합니다.
그래서event.stopPropagation(); 이함수를 써서 해결했습니다.
문제는 이 함수가가 첫번째카드에만 먹고 나머지는 먹히지 않습니다 .
순서가 문제인지 아니면 다른방법이 있는지 도움 부탁드립니다 ! ㅠㅠ
</p>
<pre>
<code>$(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();
}
});
});
</code>
</p>
<p> </p>
<pre>
<code> <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></code></pre>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
3년 전
먹히지 않다는"는 상황이
구체적으로 무엇인지 알면 좋겠군요.
event.stopPropagation();j
다음에
console.log('here...');
추가해서
콘솔 창에 이 메시지가 나오는지 확인해 보세요.
가끔은 레이어 겹치는 문제로 버튼 이미지가 클릭 자체가 안 되는 경우가 있는데 이걸 확인해 보는 방법입니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인