响应左侧边栏打开关闭
我有一个关于响应左侧边栏打开关闭function的问题。
我从codepen.io创建了这个DEMO
你可以在演示中看到一个按钮（ 点击显示蓝色div ）。 单击此按钮时，将从左侧打开蓝色div。 没关系，但如果您将浏览器width < 800px改为width < 800px ，则会显示.left div。 之后再次点击 （ 点击显示蓝色div ）蓝色div不打开，同时如果你更改浏览器width>880px那么你可以看到蓝色div仍然被打开，因为你之前点击过它。
我想在浏览器宽度<880px时点击（ 点击显示蓝色div ）然后我想从左侧显示蓝色div。
我怎么能这样做，任何人都可以在这方面帮助我？
HTML
Here is a some text Click To Show Blue 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); } });
问题出在CSS上，用这个CSS替换媒体查询css：
@media all and (max-width: 840px) { .left { z-index: 9999999999999 !important; } .secret { float: left; display: block; } .click_open_close { display: block; } }