Не могу доработать скрипт

171

31 октября 2018, 19:30

На сайте есть меню, которое изначально скрыто и открывается только при клике, причем при разворачивании подпунктов меню должен появляться эффект набора текста.Я написал скрипт но работает он коряво: При нажатии на кнопку текст появляется, эффект срабатывает, при повторном клике меню скрывается, но обратно потом не разворачивается, как исправить эту проблему?

$(document).ready(function() { 
  var menuBtn = $('.menu_btn'); 
  var menu = $('.effects'); 
 
  menuBtn.on('click', function(event) { 
    event.preventDefault(); 
    menu.removeClass(); 
    menu.toggleClass('effects-active'); 
 
  }); 
}); 
$(document).ready(function() { 
  $('.menu_btn').click(function() { 
    $('.effects-active').typeIt({ 
      speed: 35, 
      autoStart: true, 
    }); 
    if ($('#eff').hasClass('.effects')) { 
      $('.effects-active').typeIt({ 
          speed: 35, 
          autoStart: true, 
        }) 
        .reset(); 
    } 
  }); 
})

.effects { 
  display: none; 
  padding-bottom: 35px; 
} 
 
.effects-active { 
  display: inline-block; 
  padding-bottom: 35px; 
} 
 
.menu_items { 
  display: inline; 
  list-style-type: none; 
}

  
<link href='../fonts/SeoulHangangCondensed-Light.ttf' rel='stylesheet' type='text/css'> 
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> 
<script src="https://cdn.jsdelivr.net/jquery.typeit/4.4.0/typeit.min.js"></script> 
<section class="main"> 
  <div class="container-fluid main top-nav_content"> 
    <div class="row justify-content-start align-items-center"> 
      <div class="menu"> 
        <ul class="top-nav_menu"> 
          <button class="menu_btn"></button> 
          <div class="effects" id="eff"> 
            <li class="menu_items"><a class="menu_items__link" href="#" link="#211E56">Первый пункт</a></li> 
            <li class="menu_items"><a class="menu_items__link" href="#" link="#211E56">Второй пункт</a></li> 
            <li class="menu_items"><a class="menu_items__link" href="#" link="#211E56">Третий пункт</a></li> 
          </div> 
        </ul> 
      </div> 
    </div> 
  </div> 
</section>