Problems with jQuery menu?

Question

JavaScript

Good afternoon!
Tell me how to write js.
there is HTML menu code

<nav class="menu_top">
    <div class="container">
      <div class="row">
        <div class="menu_ico">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        </div>
        <ul class="menu">
        <li><a href="" alt="Главная">Главная</a></li>
        <li><a href="" alt="О проекте">О проекте</a></li>
        <li><a href="" alt="Организаторы">Организаторы</a></li>
        <li><a href="" alt="Фильмы">Фильмы</a></li>
        <li><a href="" alt="Отзывы">Отзывы</a></li>
        <li><a href="" alt="Работа с проектом">Работа с проектом</a></li>
        <li><a href="" alt="Контакты">Контакты</a></li>
      </ul>
      </div>
    </div>
    </nav>

there is a piece of css styles

.menu_top.op_m .menu_ico span:nth-child(1){
  top: 18px;
  width: 0%;
  left: 50%;
}
.menu_top.op_m .menu_ico span:nth-child(2){
  transform: rotate(45deg);
}
.menu_top.op_m .menu_ico span:nth-child(3){
  transform: rotate(-45deg);
}
.menu_top.op_m .menu_ico span:nth-child(4){
  top: 18px;
  width: 0%;
  left: 50%;
}
.menu.op_m a{
  opacity: 1;
}
}
.menu_ico {
  width: 45px;
  height: 35px;
  display: none;
  position: relative;
  cursor: pointer;
}
.menu_ico span {
  display: block;
  position: absolute;
  height: 9px;
  width: 100%;
  background: #333333;
  border-radius: 6px;
  left: 0;
  transform: rotate(0deg);
  transition: .30s ease-in-out;
}
.menu_ico span:nth-child(1){
  top: 0px;
}
.menu_ico span:nth-child(2), .menu_ico span:nth-child(3){
  top: 13px;
}
.menu_ico span:nth-child(4){
  top: 26px;
}

connected JQ
and licked the code for the menu that will display the menu when clicked

(function ($) {
  $(function(){
    $('.menu_ico').on('click', function(){
    $(this).closest('.menu_top').toggleClass('op_m');
    });
});
})(jQuery);

does not work =(((
Tell me who knows.
I know that there are many different other solutions, but I want to understand this!