Добрый день! Есть скрипт выдвижной панели. В файле стиля есть элемент (подложка), который в html код не добавлен. Возможно ли сделать так, чтобы скрипт при активации панели создавал этот элемент, а при закрытии панели удалял его? При добавлении $('.sidebar').appendTo('<div id="sidebar_bg"></div>');
элемент создается, но при закрытии панели не удаляется. Благодарю!
$(function(){
$('.sidebar_icon').click(function(e){
e.preventDefault();
$('.sidebar').toggleClass('sidebar_toggled');
});
});
.sidebar_bg {
display: block;
position: fixed;
background: rgba(0, 0, 0, 0.5);
top: 30px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 99;
}
.sidebar {
position: absolute;
top: 0;
left: -300px;
width: 300px;
height: 100%;
background: red;
-webkit-transition:all 200ms ease-in;
-moz-transition:all 200ms ease-in;
-ms-transition:all 200ms ease-in;
-o-transition:all 200ms ease-in;
transition:all 200ms ease-in;
z-index: 100;
}
.sidebar_toggled { left: 0; }
.sidebar_icon {
position: fixed;
top: 0;
right: 0;
width: 50px;
height: 50px;
background: blue;
z-index: 101;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar"></div>
<div class="sidebar_icon"></div>