패밀리사이트 버튼 눌렀을 때 누른것만 메뉴 내려오게하기
본문
//관련사이트바로가기
$(".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();
});
<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>
이런 코드로 패밀리사이트 버튼 2개를 만드려고합니다.
근데 하나를 누르면 어떤걸 누르던 두개가 동시에 다 내려와서 곤란을 겪고있습니다... 해결법을 아는데 잘 기억이 안나서 여쭈어봅니다 ㅠㅠ 혹시 어떻게 해결하는지 아시는분 계실까요?
답변 1
다음을 참고하셔서 원하시는 형태로 하시면 되지 않을까 합니다.
<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>
$(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');
});
$(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();
}
});
});
});
답변을 작성하시기 전에 로그인 해주세요.
