Задача с использованием событий

282

27 сентября 2017, 12:42

У меня есть боковая меню с установленным стилем margin-left: -240px;.Как при клике сделать чтобы она выдвигалась и при втором клике задвигалась???

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    	<meta charset="UTF-8"> 
    	<title>Chat</title> 
    	<link rel="stylesheet" href="style/style.css"> 
<style> 
.mainmenu{ 
	width: 250px; 
	height: 638px; 
	background-color: gray; 
	margin-left: -240px; 
	transition-property: margin-left; 
	transition-duration: 2s; 
 
</style> 
    </head> 
    <body class="chatbg"> 
    <div class="header"></div> 
    <div class="mainmenu" id="menu" onclick="scrolMenu()"></div> 
    <div class="chat"></div> 
     
    <script type="text/javascript"> 
    function scrolMenu() { 
    	var main = document.getElementById('menu'); 
    	main.style.marginLeft = "0px"; 
    }; 
    </script> 
    </body> 
    </html>

Answer 1

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Chat</title> 
  <link rel="stylesheet" href="style/style.css"> 
  <style> 
      .mainmenu { 
      width: 250px; 
      height: 638px; 
      background-color: gray; 
      margin-left: -240px; 
      transition-property: margin-left; 
      transition-duration: 2s; 
  </style> 
</head> 
 
<body class="chatbg"> 
  <div class="header"></div> 
  <div class="mainmenu" id="menu" onclick="scrolMenu()"></div> 
  <div class="chat"></div> 
 
  <script type="text/javascript"> 
    var isClicked = false; 
 
    function scrolMenu() { 
    var main = document.getElementById('menu'); 
      if (!isClicked) {         
        main.style.marginLeft = "0px"; 
        isClicked = true; 
      } else { 
        main.style.marginLeft = "-240px"; 
        isClicked = false; 
      } 
 
 
    }; 
  </script> 
</body> 
 
</html>

Answer 2

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Chat</title>
     <link rel="stylesheet" href="style/style.css">
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body class="chatbg">
     <div class="header"></div>
     <div class="mainmenu" id="menu" onclick="scrolMenu()"></div>
     <div class="chat"></div>
     <script type="text/javascript">
          function scrolMenu() {
               $('#menu').toggleClass('active');
          };
     </script>
     <style>
     .mainmenu{
        width: 250px;
        height: 638px;
        background-color: gray;
        margin-left: -240px;
        transition-property: margin-left;
        transition-duration: 2s;
     }
     .mainmenu.active{
          margin-left: 0;
     }
     </style>
</body>
</html>

Answer 3

Вот ответ на ваш вопрос.

function scrolMenu() { 
  var main = document.getElementById('menu'); 
  main.classList.toggle("menu0"); 
};

#menu{ 
  margin-left:50px; 
} 
#menu.menu0{ 
  margin-left: 0; 
}

<html lang="en"> 
  <head> 
    <meta charset="UTF-8"> 
    <title>Chat</title> 
    <link rel="stylesheet" href="style/style.css"> 
  </head> 
  <body class="chatbg"> 
    <div class="header"></div> 
    <div class="mainmenu" id="menu" onclick="scrolMenu()">MARGIN MENU</div> 
    <div class="chat"></div> 
 
  </body> 
</html>

Лучше не менять сам стиль с помощью javascript. А дать стиль отдельному классу, и когда элемент имеет этот класс то на него подействует определенный стиль, а если нет то будет изначальный стиль. А с помощью javascript просто добавить и удалить класс. И что бы каждый раз не морочить голову есть ли класс у элемента или нет. (что бы понять добавить при клике или удалить) есть такой хороший метод toggle.

Берем элемент.(Это вы делали), потом возьмем его классы с помощью classList, А после этого применяем метод ՝toggle՝. Этот метод добавляет класс если его нет, а если есть удаляет.

Answer 4

сделайте чтобы по клику добавлялся/удалялся какой-нибудь класс, а дальше если есть класс margin-left: 0px; иначе margin-left: -240px; также под этот класс можно подвязать и другие изменения стилей:

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Chat</title> 
  <link rel="stylesheet" href="style/style.css"> 
  <style> 
      .mainmenu { 
        width: 250px; 
        height: 638px; 
        background-color: gray; 
        margin-left: -240px; 
        transition-property: margin-left; 
        transition-duration: 2s; 
      } 
      .mainmenu.show { 
        margin-left: 0px; 
      } 
  </style> 
</head> 
 
<body class="chatbg"> 
  <div class="header"></div> 
  <div class="mainmenu" id="menu" onclick="scrolMenu()"></div> 
  <div class="chat"></div> 
 
  <script type="text/javascript"> 
    var isClicked = false; 
 
    function scrolMenu() { 
    var main = document.getElementById('menu'); 
      main.classList.toggle("show"); 
    }; 
  </script> 
</body> 
 
</html>