javascript div 보이기 숨기기 질문입니다.

javascript div 보이기 숨기기 질문입니다.

QA

javascript div 보이기 숨기기 질문입니다.

본문

<script type="text/javascript">
jQuery('#toggle').click(function () {  
    if($("#bo_list").css("display") == "none"){   
        jQuery('#bo_list').css("display", "block");   
    } 
});  

</script>

toggle 속성을 게시판 검색버튼과 연동해서 검색버튼을 클릭했을경우만 게시판리스트가 나오도록하고싶은데.    검색버튼을 누르니 페이지가 새로고침되면서 리스트가 잠깐보였다 다시 block 상태로 되네요.

유지방법없을까요?

이 질문에 댓글 쓰기 :

답변 4


    <button id="toggle">toggle</button>
    <div id="bo_list" style="display:block">bo_list</div>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#toggle').click(function() {
                
                if ($("#bo_list").css("display") == "none") {
                    $('#bo_list').css("display", "block");
                    localStorage.setItem("bo_list", "block");
                }
                else{
                    $('#bo_list').css("display", "none");
                    localStorage.setItem("bo_list", "none");
                }                
                console.log("set: " + $('#bo_list').css("display"));
                
            });
            var display = localStorage.getItem('bo_list');
            ($("#bo_list").css("display", display));
             console.log("get: " + display);
        });
    </script>

요렇게 수정해서 해결했습니다 ^^ 너무너무 감사합니다.

<script type="text/javascript">
        $(document).ready(function() {
            $('#toggle').click(function() {
                if ($("#bo_list").css("display") == "block") {
                    $('#bo_list').css("display", "block");
                    localStorage.setItem("bo_list", "block");
                }
                else{
                    $('#bo_list').css("display", "block");
                    localStorage.setItem("bo_list", "block");

                }               
               
               
            });
            var display = localStorage.getItem('bo_list');
            ($("#bo_list").css("display", display));
            console.log("get: " + display);
localStorage.clear('bo_list');

        });


    </script>

이렇게 한번 해보세요..

<script type="text/javascript">
jQuery('#toggle').click(function () {  
    if($("#bo_list").css("display" == "none"){   
        jQuery('#bo_list').css("display", "");   
    } 
});  

</script>

1. cookie 사용

2. url에 get으로 넘김

3. localStorage 사용

 

아마 검색 버튼을 누르면 폼을 전송해서 검색을해서 다시 보여주는 것 같은데 그래서 새로 고침한 것 처럼 보이는 거 같네요. 

검색 폼에 hidden 하나 추가하시고 검색 폼을 submit 하기 전에 채워서 같이 보내시고 화면 로딩시 그 변수를 확인해서 보이게 하시면 될 것 같네요

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

회원로그인

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