slideToggle 이 계속 slideDown 처럼 동작하는 건에 대하여 채택완료
ZDZ
2년 전
조회 1,888
항상 좋은 조언 주시는 모든 분들께 감사의 말씀드립니다.
현재 접었다 펼치는 메뉴를 구현하고 있습니다. slideToggle로 아래로 내려갔다가 다시 누르면 접혀 올라가는 느낌을 구현하고자했는데, slideDown을 사용한것처럼 계속 위에서 아래로 내려가는 동작밖에 하지 않습니다.
css는 너무 복잡해서 못 올리겠는데 자바스크립트/제이쿼리 선에서 해결할 수 있을까요?
</p>
<p><section id="sct_sort"></p>
<p> <h2>Sort</h2></p>
<p> <div></p>
<p> <button type="button" class="btn_sort"></p>
<p> <div><i class="fa-solid fa-list"></i> Sort</div></p>
<p> <i class="fa-solid fa-chevron-down"></i></p>
<p> </button></p>
<p> <ul></p>
<p> <li><a href="<?php echo $sct_sort_href; ?>it_update_time&sortodr=desc">new product</a></li></p>
<p> <li><a href="<?php echo $sct_sort_href; ?>it_name&sortodr=asc">product name</a></li></p>
<p> <li><a href="<?php echo $sct_sort_href; ?>it_price&sortodr=asc">low price</a></li></p>
<p> <li><a href="<?php echo $sct_sort_href; ?>it_price&sortodr=desc">high price</a></li></p>
<p> <li><a href="<?php echo $sct_sort_href; ?>it_sum_qty&sortodr=desc">popular item</a></li></p>
<p> </ul></p>
<p> </div></p>
<p></section></p>
<p> </p>
<p><script></p>
<p>$(".btn_sort").click(function(){</p>
<p> $("#sct_sort ul").slideToggle();</p>
<p> $(this).toggleClass('active');</p>
<p> $(".btn_sort > i").toggleClass('active');</p>
<p>});</p>
<p>$(document).mouseup(function (e){</p>
<p> var container = $("#sct_sort ul");</p>
<p> if( container.has(e.target).length === 0)</p>
<p> container.hide();</p>
<p>});</p>
<p></script></p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
2년 전
</p>
<p><script>
$(".btn_sort").click(function(){
$("#sct_sort ul").slideToggle();
$(this).toggleClass('active');
$(".btn_sort > i").toggleClass('active');
});
$(document).mouseup(function (e){
if ($(e.target).closest('.btn_sort').length > 0) {
return;
}
var container = $("#sct_sort ul");
if( container.has(e.target).length === 0)
container.hide();
});
</script></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
Z
ZDZ
2년 전
진짜진짜너무감사합니다..... 배르만님은 코딩의 천재신것같습니다..ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인