2
スニペットに示されているように、「引き出し切り替え」ボタンで引き出しを切り替えたいと思います。ボタンをクリックし、選択した以外の要素をクリックすることで、クラスをjQueryで切り替える
唯一の問題は、ドロワーが開かれているときに、.drawer-divの外側をクリックすることによってもクローズしたいということです。
誰でも私にこれを手伝うことができますか?より効率的な方法が必要です。
css目的で.lockedクラスが使用されます。
$(".drawer-toggle").click(function(e){
\t $(".drawer").toggleClass('open');
\t $(".main").toggleClass('locked');
\t e.stopPropagation();
});
$(".main").click(function(){
\t if ($(".drawer").hasClass('open')) {
\t \t $(".drawer").toggleClass('open');
\t \t $(".main").toggleClass('locked');
\t }
});
body,
html {
position: relative;
height: 100%;
width: 100%;
margin: 0 auto;
padding: 0;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.locked { \t \t
\t overflow: hidden !important;
}
.drawer {
position: fixed;
background-color: $white;
width: 200px;
top: 0;
bottom: 0;
right: -200px;
padding: 20px;
border-left: 1px solid $border-color;
transition: all 0.3s ease 0s;
}
.drawer.open {
right: 0;
}
.drawer.open ~ .main {
left: -200px;
}
.drawer.open ~ .main:after {
content: ' ';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.4);
z-index: 900;
}
.main {
position: absolute;
height: 100%;
width: 100%;
left: 0;
background-color: grey;
transition: all 0.3s ease 0s;
}
.drawer-toggle {
display: inline-block;
padding: 10px;
background-color: green;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="drawer">
<a class="drawer-toggle">toggle</a>
<ul>
<li><a href="#">Menu item</a></li>
</ul>
</div>
<div class="main">
<a class="drawer-toggle">toggle</a>
</div>
メインコンテナ/本体にオンクリックする - >引き出しが開いているかどうかを確認する - >閉じる? –