패밀리사이트 버튼 눌렀을 때 누른것만 메뉴 내려오게하기 채택완료
ZDZ
1년 전
조회 1,496
</p>
<p> </p>
<p> //관련사이트바로가기
$(".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();
});</p>
<p></p>
<p> <div id="sct_sort">
<button type="button" class="btn_sort">
<div>
1<i class="xi-angle-down-min" aria-hidden="true"></i>
</div>
</button>
<ul style="overflow: hidden; display: none;">
<li>
<a scope="col" class="mb_disp_no"></a><a href="#">a
<i class="fa fa-sort" aria-hidden="true"></i>
</a>
</li>
<li>
<a scope="col" class="mb_disp_no"></a><a href="#">b
<i class="fa fa-sort" aria-hidden="true"></i>
</a>
</li>
</ul>
</div></p>
<p>
이런 코드로 패밀리사이트 버튼 2개를 만드려고합니다.
http://sir.kr/data/editor/2402/1889326033_1707375044.2104.png" width="530" />
근데 하나를 누르면 어떤걸 누르던 두개가 동시에 다 내려와서 곤란을 겪고있습니다... 해결법을 아는데 잘 기억이 안나서 여쭈어봅니다 ㅠㅠ 혹시 어떻게 해결하는지 아시는분 계실까요?
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
1년 전
다음을 참고하셔서 원하시는 형태로 하시면 되지 않을까 합니다.
</p>
<p><div id="sct_sort_2">
<button type="button" class="btn_sort">
<div>
2<i class="xi-angle-down-min" aria-hidden="true"></i>
</div>
</button>
<ul style="overflow: hidden; display: none;">
<li>
<a scope="col" class="mb_disp_no"></a><a href="#">c
<i class="fa fa-sort" aria-hidden="true"></i>
</a>
</li>
<li>
<a scope="col" class="mb_disp_no"></a><a href="#">d
<i class="fa fa-sort" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</p>
<p>$(document).ready(function(){
$(".btn_sort").click(function(){
var $target = $(this).closest('div[id^="sct_sort"]').find('ul');
$target.slideToggle();
$(this).toggleClass('active');
$(this).find('i').toggleClass('active');
});</p>
<p> $(document).mouseup(function (e){
$(".btn_sort").each(function(){
var $target = $(this).closest('div[id^="sct_sort"]').find('ul');
if (!$(e.target).closest('.btn_sort').length && $target.has(e.target).length === 0) {
$target.hide();
}
});
});
});
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인