響應式左側欄打開關閉

Question

我有一個關於響應左側欄打開關閉功能的問題。

我創造了這個DEMO從 codepen.io

您可以在演示中看到有一個按鈕（單擊顯示藍色DIV）。當你點擊這個按鈕時，藍色的div將從左側打開。沒關係，但如果您更改瀏覽器width < 800px則會顯示.left div。如果你再次點擊（點擊顯示藍色div）藍色div不能打開，同時如果你改變你的瀏覽器width>880px那麼你可以看到藍色div仍然打開，因爲你之前點擊它。

我想讓瀏覽器寬度爲< 880px，當我點擊（單擊以顯示藍色div），然後我想從左側顯示藍色div。

我該怎麼做，任何人都可以在這方面幫助我？

HTML

<div class="test_container"> 
    <div class="left"> 
    <div class="left_in">Here is a some text</div> 
    <div class="problem-div"> 
     <div class="proglem-div-in"> 
     <!--Here is a some menu--> 
     </div> 
    </div> 
    </div> 
    <div class="gb" data-id="1" data-state="close">Click To Show Blue Div</div> 
    <div class="right"> 
    <div class="bb"></div> 
    </div> 
</div> 

CSS

.test_container { 
    display: block; 
    position: absolute; 
    height: auto; 
    bottom: 0; 
    top: 0; 
    left: 0; 
    right: 0; 
    max-width: 980px; 
    min-width: 300px; 
    margin-top: 20px; 
    margin-bottom: 20px; 
    margin-right: auto; 
    margin-left: auto; 
    background-color: #000; 
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2); 
    -webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px; 
    border-radius: 3px; 
    -webkit-border-radius: 3px; 
    -o-border-radius: 3px; 
    -moz-border-radius: 3px; 
    min-height: 140px; 
} 

.left { 
    display: block; 
    position: absolute; 
    float: left; 
    width: 30%; 
    overflow: hidden; 
    padding: 0px; 
    bottom: 0; 
    top: 0; 
    left: 0; 
    background-color: red; 
    border-right: 1px solid #d8dbdf; 
    -webkit-border-top-left-radius: 3px; 
    -webkit-border-bottom-left-radius: 3px; 
    -moz-border-radius-topleft: 3px; 
    -moz-border-radius-bottomleft: 3px; 
    border-top-left-radius: 3px; 
    border-bottom-left-radius: 3px; 
    transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s; 
} 

.left_in { 
    z-index: 999 !important; 
    position: absolute; 
    float: left; 
    width: 100%; 
    height: 100%; 
    background-color: red; 
    opacity: 0; 
    -webkit-animation-duration: 0.9s; 
    animation-duration: 0.9s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-name: slideLeft; 
    animation-name: slideLeft; 
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
} 

@-webkit-keyframes slideLeft { 
    0% { 
    -webkit-transform: translateX(25rem); 
    transform: translateX(25rem); 
    opacity: 0; 
    } 
    100% { 
    -webkit-transform: translateX(0); 
    transform: translateX(0); 
    opacity: 1; 
    } 
} 

@keyframes slideLeft { 
    0% { 
    -webkit-transform: translateX(15rem); 
    transform: translateX(15rem); 
    opacity: 0; 
    } 
    100% { 
    -webkit-transform: translateX(0); 
    transform: translateX(0); 
    opacity: 1; 
    } 
} 

.aa { 
    background-color: #f7f7f7; 
    /*background-color: #dfdfdf; 
    background-image: -webkit-linear-gradient(top,#dddbd1,#d2dbdc); 
    background-image: linear-gradient(top,#dddbd1,#d2dbdc);*/ 

    width: 0; 
    top: 0; 
    border-radius: 0%; 
    z-index: 1000; 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 
    height: 100%; 
    overflow: hidden; 
    position: absolute; 
    left: 0; 
} 

.click_open_close { 
    right: 0px; 
    padding: 10px; 
    color: #fff; 
    position: absolute; 
    background-color: green; 
    cursor: pointer; 
    z-index: 999; 
    display: none; 
} 

.pp { 
    right: 0px; 
    padding: 10px; 
    color: #fff; 
    position: absolute; 
    background-color: green; 
    cursor: pointer; 
} 

.right { 
    display: block; 
    position: absolute; 
    width: 70%; 
    bottom: 0; 
    top: 0; 
    right: 0%; 
    background-color: pink; 
    -webkit-border-top-right-radius: 3px; 
    -webkit-border-bottom-right-radius: 3px; 
    -moz-border-radius-topright: 3px; 
    -moz-border-radius-bottomright: 3px; 
    border-top-right-radius: 3px; 
    border-bottom-right-radius: 3px; 
} 

.gb { 
    cursor: pointer; 
    position: absolute; 
    left: 30%; 
    padding: 10px; 
    color: #fff; 
    background-color: black; 
    z-index: 9999; 
} 

.problem-div { 
    z-index: 999 !important; 
    position: absolute; 
    float: left; 
    width: 0%; 
    height: 100%; 
    background-color: blue; 
    opacity: 0; 
    -webkit-animation-duration: 0.9s; 
    animation-duration: 0.9s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-name: slideLeft; 
    animation-name: slideLeft; 
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
} 

@media all and (max-width: 840px) { 
    .left { 
    left: -60%; 
    z-index: 9999999999999 !important; 
    } 
    .secret { 
    float: left; 
    display: block; 
    } 
    .right { 
    width: 100%; 
    } 
    .click_open_close { 
    display: block; 
    } 
} 

JS

$(".gb").on('click', function() { 

    var id = $(this).data("id"); 
    var state = $(this).data("state"); 
    if (state === "close") { 
    $(this).data("state", 'open'); 
    $(".problem-div").animate({ 
     width: "100%" 
    }, 200).find(".proglem-div-in").animate({ 
     width: "100%" 
    }, 200); 
    } else { 
    $(this).data("state", 'close'); 
    $(".problem-div").animate({ 
     width: "0%" 
    }, 200).find(".proglem-div-in").animate({ 
     width: "0%" 
    }, 200); 
    } 
}); 

Answer 1

問題是與CSS，替換媒體查詢CS s的這個CSS：

@media all and (max-width: 840px) { 
    .left { 
    z-index: 9999999999999 !important; 
    } 
    .secret { 
    float: left; 
    display: block; 
    } 

    .click_open_close { 
    display: block; 
    } 
}