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