0

Добрый день! Есть скрипт выдвижной панели. В файле стиля есть элемент (подложка), который в 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>

1
  • 1
    а добавить в раметку .sidebar_bg и с помощью toggle показывать? пример - jsfiddle.net/2mhv09n6
    – soledar10
    Commented 12 апр. 2017 в 10:51

2 ответа 2

1

$('#sidebar_bg').remove(); - удалить элемент

$(function(){
  $('.sidebar_icon').click(function(e){
    e.preventDefault();
    if ($('#sidebar_bg').length == 0) {
      $('.sidebar').append('<div id="sidebar_bg"></div>');
    } else {
      $('#sidebar_bg').remove();
    }
    $('.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>

0
1

Нужно добавить проверку в конце события на наличие класса , и в случае если он есть , удалять все дивы из "sidebar"

if ($('.sidebar').hasClass('sidebar_toggled')) {
   $('.sidebar div').remove();
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.