jQuery: нежелательное поведение моего выпадающего меню (на рабочем столе и на мобильном устройстве)

Question

Я собрал выпадающий список с помощью jQuery и некоторых css / scss.Это работает на первый взгляд, но всегда есть ошибки, которые, я думаю, связаны с кодом jQuery или ненужными правилами CSS.Я просто не уверен, какой из них ..

Вы можете увидеть текущий статус здесь.Упомянутое выпадающее меню представляет собой пункт «Leistungen» на панели навигации:

https://www.s -wat.de

Особенно в мобильном окне просмотра появляются ошибки.Если я открою раскрывающийся список здесь и в открытом состоянии нажмите на другую точку (например, «Контакт»), а затем снова на «Leistungen», появится нежелательный эффект fadeIn fadeOut.Раскрывающийся список сначала откроется и закроется, прежде чем я смогу его нормально открыть.

Вот мой код jQuery:

(function($) {
    "use strict"; // Start of use strict

    // Closes responsive menu when a scroll trigger link is clicked
    $('.first .js-scroll-trigger, .last .js-scroll-trigger, .dropdown-menu .js-scroll-trigger').click(function() {
      $('.navbar-collapse').collapse('hide');
      if (!$('.dropdown-menu').hasClass('show')) {
        $('.dropdown-menu').fadeOut('slow');
      }
      $('.dropdown-menu').removeClass('show');
      $('.dropdown').removeClass('show');
    });

    var navbarBehave = function(){
      if ($(window).width() < 992){
        $('.dropdown-toggle').click(function() {
          if (!$('.dropdown-menu').hasClass('show')) {
            $('.dropdown-menu').fadeIn('slow');
          }else{
            $('.dropdown-menu').fadeOut('slow');
          }
        }); 
      }else{
        $('.dropdown-toggle').hover(function() {
          if (!$('.dropdown-menu').hasClass('show')) {
            $('.dropdown-menu').fadeIn(300);
          }else{
            $('.dropdown-menu').fadeOut(300);
          }
        });     
      }
    }

    navbarBehave();

    $(window).resize(function(){
      navbarBehave();
    });   

  })(jQuery); // End of use strict