사이드바 쿠키 관련

사이드바 쿠키 관련

QA

사이드바 쿠키 관련

본문



사이드바를 오픈 시에, 페이지를 옮겨도 오픈되어 있는 상태가 유지되도록

JQUERY COOKIE 를 적용시키기 위해 이것저것 해도 적용이 안되는데

 

쿠키 적용할 수 있도록 도움주실분 계실까요??



 

 

<input type="checkbox" id="menuicon">
<ul>
    <li>
        <label for="menuicon">
            <span></span><span></span><span></span>
        </label>
    </li>
    <li>
        <a href="#" class="search"><span class="icon"></span><span>상품검색</span></a>
    </li>
    <li>
        <a href="#" class="today"><span class="icon"></span><span>최근본상품</span></a>
    </li>
</ul>

<div class="sidebar">
내용 나오는 영역</div>


<style>
* {padding:0;margin:0;}
input[id="menuicon"] {display:none;}
input[id="menuicon"] + ul {display:block;position:fixed;right:0; top:50%;transform:translateY(-50%);transition:all .35s;text-align:right;}  
input[id="menuicon"] + ul > li {display:block;width:50px;height:50px;border:1px solid #f1f1f1;position:relative;margin-top:-1px;}
input[id="menuicon"] + ul > li > a {display:block;width:auto;height:50px;overflow:hidden;transition:all .35s;}
input[id="menuicon"] + ul > li > label {display:block;cursor:pointer;width:auto;height:50px;background:#dadada;}

input[id="menuicon"] + ul > li:nth-child(1) label span {display:block;position:absolute;width:50%;height:3px;border-radius:30px;background:#333;transition:all .35s;}
input[id="menuicon"] + ul > li:nth-child(1) label span:nth-child(1) {top:30%;left:50%;transform:translateX(-50%);}
input[id="menuicon"] + ul > li:nth-child(1) label span:nth-child(2) {top:50%;left:50%;transform:translate(-50%,-50%);}
input[id="menuicon"] + ul > li:nth-child(1) label span:nth-child(3) {bottom:30%;left:50%;transform:translateX(-50%);}

input[id="menuicon"] + ul > li:nth-child(2) a .icon {background:url('./img/search.png') center center no-repeat;background-size:50%;display:inline-block;width:50px;height:50px;vertical-align:middle;}
input[id="menuicon"] + ul > li:nth-child(3) a .icon {background:url('./img/sand-clock.png') center center no-repeat;background-size:50%;display:inline-block;width:50px;height:50px;vertical-align:middle;}

input[id="menuicon"]:checked + ul {z-index:2;right:300px;}  
input[id="menuicon"]:checked + ul > li:nth-child(1) label {z-index:2;right:0;}
input[id="menuicon"]:checked + ul > li:nth-child(1) label span:nth-child(1) {top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);}
input[id="menuicon"]:checked + ul > li:nth-child(1) label span:nth-child(2) {opacity:0;}
input[id="menuicon"]:checked + ul > li:nth-child(1) label span:nth-child(3) {bottom:50%;left:50%;transform:translate(-50%,50%) rotate(-45deg);}
div[class="sidebar"] {width:300px;height:100%;background:#f5f5f5;position:fixed;top:0;right:-300px;z-index:1;transition:all .35s;}
input[id="menuicon"]:checked + ul + div {right:0;}  

</style>
 

 

 

이 질문에 댓글 쓰기 :

답변 1


<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
function setCookie(cookie_name, value, days) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + days);
    var cookie_value = escape(value) + ((days == null) ? '' : '; expires=' + exdate.toUTCString());
    document.cookie = cookie_name + '=' + cookie_value;
}
function getCookie(cookie_name) {
    var x, y;
    var val = document.cookie.split(';');
    for (var i = 0; i < val.length; i++) {
        x = val[i].substr(0, val[i].indexOf('='));
        y = val[i].substr(val[i].indexOf('=') + 1);
        x = x.replace(/^\s+|\s+$/g, '');
        if (x == cookie_name) {
          return unescape(y);
        }
    }
}
$(document).ready(function() {
    var cookieName = "sidebar";
    $(".sidebar").click(function () {
        var cookie = getCookie(cookieName);
        if(typeof cookie == "undefined"){
            setCookie(cookieName, "off", "1");
            cookie = getCookie(cookieName);
            alert(document.cookie);
        }
        if(cookie == "off"){
            setCookie(cookieName, "on", "1");
        }else{
            setCookie(cookieName, "off", "1");
        }
        alert(cookie);
    });
});
</script>
<div class="sidebar">
aaaaaaaaaa
</div>

참고:

https://webisfree.com/2015-02-04/[%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8]-%EC%BF%A0%ED%82%A4(cookie)-%EC%A0%80%EC%9E%A5-%EB%B0%8F-%EC%82%AD%EC%A0%9C-%EC%98%88%EC%A0%9C%EB%B3%B4%EA%B8%B0

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

회원로그인

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