Javascript-форум - Работает только после перезагрузки

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Работает только после перезагрузки (https://javascript.ru/forum/dom-window/76099-rabotaet-tolko-posle-perezagruzki.html)

Работает только после перезагрузки

Сделал 2 тренировочных кнопки "Скрыть" и "Развернуть", ну и собственно написал к ним простые функции с помощью jQuery , оно то работает , скрывает и разворачивает, но свернуть и развернуть могу только 1 раз, дальше кнопки не работают. Чтобы снова работали приходится перезапустить страницу. Как исправить?:help:
HTML код:
<nav class="menu">
<ul>
<li class="active"><a href="">Пункт</a></li>
<li><a href="">Пункт</a></li>
<li><a href="">Пункт</a></li>
<li><a href="">Пункт</a></li>
</ul>
<input type="button" value="свернуть" onclick="a()"/>
</nav>
<input type="button" value="развернуть" onclick="b()"/>
и JS
var stil = $('.menu');
function a(){
stil.addClass("men")
};
function b(){
stil.addClass("menz");
}

AndreasW33D,
removeClass где?

спасибо большое, написал просто 2 разных стиля , в одном display: none а в другом display: block , сменил на removeClass, работает

AndreasW33D,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  nav{
      display: none;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
  $(".open").click(function() {
    $('.menu').slideToggle()
})
});
  </script>
</head>

<body>
<nav class="menu">
<ul>
<li class="active"><a href="">Пункт</a></li>
<li><a href="">Пункт</a></li>
<li><a href="">Пункт</a></li>
<li><a href="">Пункт</a></li>
</ul>
<input type="button" value="свернуть"   class="open">
</nav>
<input type="button" value="развернуть" class="open"/>

</body>
</html>