Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.06.2018, 13:28
Аспирант
Отправить личное сообщение для maxg5 Посмотреть профиль Найти все сообщения от maxg5
 
Регистрация: 16.08.2016
Сообщений: 89

Не работает событие по клику
Всем доброго дня!
Делаю мобильное меню на сайте 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 не работает
Ответить с цитированием
  #2 (permalink)  
Старый 30.06.2018, 14:47
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Оно работает, и всегда остаётся в закрытом состоянии, как и указано в скрипте.

$(function(){
	const primaryMenu = $(".primary-menu");
 	let isOpen = false;
	
    $(".burger").click(function () {
		isOpen ^= true;
    	primaryMenu.css({ left: isOpen ? "0px" : "-330px"});
	});
});
Ответить с цитированием
  #3 (permalink)  
Старый 30.06.2018, 15:06
Аспирант
Отправить личное сообщение для maxg5 Посмотреть профиль Найти все сообщения от maxg5
 
Регистрация: 16.08.2016
Сообщений: 89

Спасибо!
А если усложнить код и добавить прозрачный фон сайта при открытом меню.
Т.е. нужно так же при клике по .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"});
	});
});


Но выдается синтактисеская ошибка
Ответить с цитированием
  #4 (permalink)  
Старый 30.06.2018, 15:16
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

backgroundColor, а не background-color в 9 строке
Ответить с цитированием
  #5 (permalink)  
Старый 30.06.2018, 15:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

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>

Последний раз редактировалось рони, 02.07.2018 в 22:35.
Ответить с цитированием
  #6 (permalink)  
Старый 02.07.2018, 11:27
Аспирант
Отправить личное сообщение для maxg5 Посмотреть профиль Найти все сообщения от maxg5
 
Регистрация: 16.08.2016
Сообщений: 89

Спасибо!
А как сделать так, что бы когда меню открыто, то за место класса .burger показывался крестик - X. Ну например класс .close
Ответить с цитированием
  #7 (permalink)  
Старый 02.07.2018, 11:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

maxg5,
кому вопрос?
Ответить с цитированием
  #8 (permalink)  
Старый 02.07.2018, 11:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

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")
	});
});
Ответить с цитированием
  #9 (permalink)  
Старый 02.07.2018, 20:15
Аспирант
Отправить личное сообщение для maxg5 Посмотреть профиль Найти все сообщения от maxg5
 
Регистрация: 16.08.2016
Сообщений: 89

Немного не то что нужно.
В данном случае по клику по элементу с классом .burger, этому элементу присваивается класс .close.
Это не то что нужно.
Нужно что бы по клику на элемент с классом .burger, этот элемент исчезал, меню открывалось, а на месте элемента с классом .burger появлялся элемент с классом .close
Ну и аналогично в обратном порядке по клику на .close
Ответить с цитированием
  #10 (permalink)  
Старый 02.07.2018, 20:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

maxg5,
чем замена элементов отличается от смены класса, в данном случае?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отрисовка сетки на canvas и событие по клику BR4IN Общие вопросы Javascript 0 05.03.2017 14:05
Не работает событие. farand_777 jQuery 5 15.11.2013 02:24
Не работает код внутри циклов DZHETIGAPA Events/DOM/Window 1 21.06.2011 01:03
Помогите не работает событие motoroller jQuery 2 01.04.2011 23:38
Doctype и javascript: не работает событие в Internet exproler nastya Internet Explorer 0 23.03.2011 12:26