The list is not hidden. How to fix?

A

Alexander Baranov2018-03-20 14:15:36

HTML

Alexander Baranov, 2018-03-20 14:15:36

Hello. Help me please.
There is such a menu, it unfolds, but does not return back when you press on it.
How to do it?

<!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
}

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

S

Sergey Epifanov, 2018-03-20
@qwertyq1488

here is another option
, the meaning is the same as in the answer above, only written in a slightly different style - no if and non-strict comparison

L

leni_m, 2018-03-20
@leni_m

https://codepen.io/anon/pen/oqBJev