Не работает событие по клику
Всем доброго дня!
Делаю мобильное меню на сайте maxg5.ru Нужно что бы по клику на кнопку, меню открывалось и закрывалось. Т.е. по клику классу .burger присваивалось свойство css {left:0px;} А еще по одному клику это свойство удалялось либо присваивалось свойство css {left:-330px;} Вот написал такой скрипт:
<script>
$(function(){
$(".burger").click(function () {
$(".primary-menu").css({'left': '0px'});
}),
$(".burger").click(function () {
$(".primary-menu").css({'left': '-330px'});
});
});
</script>
Но при нажатии на .burger не работает |
Оно работает, и всегда остаётся в закрытом состоянии, как и указано в скрипте.
$(function(){
const primaryMenu = $(".primary-menu");
let isOpen = false;
$(".burger").click(function () {
isOpen ^= true;
primaryMenu.css({ left: isOpen ? "0px" : "-330px"});
});
});
|
Спасибо!
А если усложнить код и добавить прозрачный фон сайта при открытом меню. Т.е. нужно так же при клике по .burger добавить к классу .stite свойсвто css background-color:rgba(17,17,17,0.4), а при повторном клике убрать это свойство. у меня вот так получилось:
$(function(){
const primaryMenu = $(".primary-menu");
const site = $(".site");
let isOpen = false;
$(".burger").click(function () {
isOpen ^= true;
primaryMenu.css({ left: isOpen ? "0px" : "-330px"});
site.css({ background-color: isOpen ? "rgba(17,17,17,0.4)" : "#fff"});
});
});
Но выдается синтактисеская ошибка |
backgroundColor, а не background-color в 9 строке
|
maxg5,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
html, body{
height: 100%;
margin: 0;
padding: 0;
}
.site{
background-color: #fff;
position: relative;
transition: background-color .3s .4s;
}
.primary-menu{
width: 330px;
height: 100%;
position: absolute;
left: -330px;
transition: left .7s;
background-color: rgba(69, 43, 18, 1);
}
.site.open{
transition-delay: 0s;
background-color: rgba(17,17,17,0.4)
}
.site.open .primary-menu{
left: 0;
}
.burger{
position: fixed;
width: 40px;
height: 40px;
background-image: url(http://da-strateg.ru/wp-content/uploads/2015/12/menu.png);
background-size: cover;
}
.site.open .burger{
background-image: url(http://100грузов.рф/wp-content/uploads/2016/04/close-icon.png);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
var site = $(".site");
$(".burger").click(function () {
site.toggleClass("open");
});
});
</script>
</head>
<body class="site">
<div class="primary-menu"></div>
<div class="burger"></div>
</body>
</html>
|
Спасибо!
А как сделать так, что бы когда меню открыто, то за место класса .burger показывался крестик - X. Ну например класс .close |
maxg5,
кому вопрос? |
maxg5,
$(function(){
const primaryMenu = $(".primary-menu");
const site = $(".site");
let isOpen = false;
$(".burger").click(function () {
isOpen ^= true;
primaryMenu.css({ left: isOpen ? "0px" : "-330px"});
site.css({ "background-color": isOpen ? "rgba(17,17,17,0.4)" : "#fff"});
$(this).toggleClass("burger close")
});
});
|
Немного не то что нужно.
В данном случае по клику по элементу с классом .burger, этому элементу присваивается класс .close. Это не то что нужно. Нужно что бы по клику на элемент с классом .burger, этот элемент исчезал, меню открывалось, а на месте элемента с классом .burger появлялся элемент с классом .close Ну и аналогично в обратном порядке по клику на .close |
maxg5,
чем замена элементов отличается от смены класса, в данном случае? |
| Часовой пояс GMT +3, время: 10:25. |