结合jQuery脚本

时间:2015-05-24 02:42:22

标签: jquery

如何组合这两个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,汉堡包会触发滑落效果,但它不会滑动&#34; (刚刚出现)并且没有“菜单”。所示。如果我有第一个jQuery,&#39; MENU&#39;只会触发下滑影响;点击汉堡包赢了

2 个答案:

答案 0 :(得分: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');
    });
}); 

答案 1 :(得分:0)

{{1}}

为什么这不起作用?