Всем привет. Помогите пожалуйста.
Есть такое меню, оно разворачивается, но не возвращается обратно когда по нему жмёшь.
Как это сделать?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<script src="js.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="blockk">
<button class="bmenu" onclick="document.querySelector('.submenu').style.opacity ='1'"
<a href="#" class="menu" onclick="document.querySelector('.submenu').style.opacity ='1'">MENU</a>
</button>
<div class="submenu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</body>
</html>
.blockk{
height: 100px;
width: 400px;
background-color: silver;
border-radius: 10px;
}
.blockk button{
background-color: red;
border-radius: 10px;
list-style:none;
border:none;
}
.bmenu{
line-height:50px;
margin: 20px 120px;
height: 50px;
width:150px;
}
ul li {
list-style-type: none;
text-decoration: none;
}
a{
text-decoration:none;
color:#fff;
}
.submenu{
margin-top: -20px;
opacity: 0;
height: 200px;
width: 400px;
background-color: silver;
border-radius: 10px;
transition: 0.2s
}
Средний