SIR
목록으로

패밀리사이트 버튼 눌렀을 때 누른것만 메뉴 내려오게하기 채택완료

ZDZ
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전 조회 1,653
답변 1
목록

Copy 
//관련사이트바로가기
                $(".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();
                });

Copy 
<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개를 만드려고합니다.

1889326033_1707375044.2104.png

근데 하나를 누르면 어떤걸 누르던 두개가 동시에 다 내려와서 곤란을 겪고있습니다... 해결법을 아는데 잘 기억이 안나서 여쭈어봅니다 ㅠㅠ 혹시 어떻게 해결하는지 아시는분 계실까요?

#그누보드5

답변 1개

채택된 답변
+20 포인트

다음을 참고하셔서 원하시는 형태로 하시면 되지 않을까 합니다.

Copy 
<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>

 

Copy 
$(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();
            }
        });
    });
});
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고