스크립트 hide show 질문

스크립트 hide show 질문

QA

스크립트 hide show 질문

본문

지역검색 부분을 아래와 같이 해보았습니다.

그런데 문제가 발생하네요. 

 

"서울"을 클릭하면 검색은 되는데,

아래에 펼쳐질 군구가 나타났다가 바로 사라져요.

계속 펼쳐져 있어야 하는데, 어느 부분이 잘 못 되었나요?

감사합니다. 

 

<< 아래의 경우는 군구가 펼쳐지 지만 검색이 안되고 >>

<li name="sca_do" data-val="서울" class="">서울</li>

 

<< 아래의 경우는 검색은 되는데 군구가 펼쳐지다가 바로 사라지는 현상 >> 
<li name="sca_do" data-val="서울" class="" onclick="javascript:location.href='<?php echo G5_URL; ?>/bbs/board.php?bo_table=gooin&sca=&sfl=wr_7&stx=서울';">서울</li>

 

 

https://sir.kr/qa/462380?sfl=mb_id%2C1&lstx=imex9090

 

                  <div class="search_filter">

                            <form autocomplete="off”>

                                <p>지역선택</p>

                                <ul class="sca_do">

                                    <li name="sca_do" data-val="" class="active">전국</li>

                                    <li name="sca_do" data-val="서울" class="">서울</li>

                                    <li name="sca_do" data-val="경기" class="">경기</li>

                                    ... 

                                </ul>

                           

                                <ol data-ol="서울" class="sca_si" style="display: none;">

                                    <li name="sca_si" data-val="서울" class="active">전체</li>

                                    <li name="sca_si" data-val="서울 강남구" class="">강남구</li>

                                    <li name="sca_si" data-val="서울 강동구" class="">강동구</li>

                                    ...

                                </ol>

                            </form>

                        </div>

 

 

 

   <script src="<?php echo G5_URL; ?>/jquery.min.js"></script>

 

    <script>
        $(function(){
            $('[name="sca_do"]').click(function(){
                $('[name="sca"]').val($(this).data('val'));
                $('.sca_do li').removeClass('active');
                $(this).addClass('active');
                $('.sca_si li').removeClass('active');
                $('.sca_si').hide();
                $('[data-ol="' + $(this).data('val') + '"] li:first').addClass('active');
                $('[data-ol="' + $(this).data('val') + '"]').show();
            });
            $('[name="sca_si"]').click(function(){
                $('[name="sca"]').val($(this).data('val'));
                $('.sca_si li').removeClass('active');
                $(this).addClass('active');
            });
            $('[name="sw1"]').click(function(){
                $('[name="sw1"]').val($(this).data('val'));
                $('.sw1 li').removeClass('active');
                $(this).addClass('active');
            });
        });
        </script>

이 질문에 댓글 쓰기 :

답변 1

<li name="sca_do" data-val="서울" class="">서울</li> 이건 열긴했는데 이동하는 코드가 없어서 그런거구요

<li name="sca_do" data-val="서울" class="" onclick="javascript:location.href='<?php echo G5_URL; ?>/bbs/board.php?bo_table=gooin&sca=&sfl=wr_7&stx=서울';">서울</li>

이건 누르니까 펼쳐지지만 곧바로 페이지 이동을 해버리니 그런겁니다.

 

펼치고 닫고 하는 부분과 검색 후 이동하는 부분을 별도로 만들어보세요.

$('.sca_do').click( 에서 열고닫고 하시고요

$('[name="sca_do"]').click( 에서 검색 url 이동 넣으시면 되겠어요

$('.sca_do').click( 에서 열고닫고 하시고요
$('[name="sca_do"]').click( 에서 검색 url 이동 넣으시면 되겠어요

위의 부분을 조금 자세히 설명 부탁드립니다.
감사합니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 806
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT