Комбинирование JQuery скрипты

Question

Как объединить эти 2 JQuery скрипты ?:

jQuery(document).ready(function() { 
    jQuery('#header-nav').hide().before('<a href="#" id="toggle-header-nav" class="skip-link skip-nav">MENU</a>'); 
    jQuery('a#toggle-header-nav').click(function() { 
     jQuery('#header-nav').slideToggle(500); 
     return false; 
    }); 
}); 

И:

jQuery(document).ready(function(){ 
    jQuery('.skip-link.skip-nav').click(function(){ 
     jQuery(this).toggleClass('open'); 
    }); 
}); 

Первый делает мой заголовок слайда медленно со значком «меню», и во-вторых, дает опрятный эффект перехода гамбургера. Но когда я нажимаю на гамбургер, он не вызывает скачок вниз. Как мне объединить 2 для этого?

ОБНОВЛЕНИЕ: Может быть, это поможет объяснить лучше: если я удалю первый jQuery, гамбургер вызовет эффект слайда, но он не «скользит» (просто появляется) и не отображается «МЕНЮ». Если у меня есть первый jQuery, «МЕНЮ» вызовет только понижающий эффект; щелчок на гамбургере не будет.

Answer 1

Это не работает?

$(document).ready(function() { 
    $('#header-nav').hide().before('<a href="#" id="toggle-header-nav" class="skip-link skip-nav">MENU</a>'); 
    $('a#toggle-header-nav').on("click", function() { 
     $('#header-nav').slideToggle(500); 
    }); 

    $('.skip-link.skip-nav').on("click", function(){ 
     $(this).toggleClass('open'); 
    }); 
}); 

Answer 2

jQuery(document).ready(function() { 
    jQuery('#header-nav').hide().before('<a href="#" id="toggle-header-nav" class="skip-link skip-nav">MENU</a>'); 

    jQuery('a#toggle-header-nav').click(function() { 
     jQuery('#header-nav').slideToggle(500); 
     return false; 
    }); 
    jQuery('.skip-link.skip-nav').click(function(){ 
     jQuery(this).toggleClass('open'); 
    }); 
}); 

Почему это не работает?