Question

如何组合这两个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;只会触发下滑影响;点击汉堡包赢了

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

{{1}}

为什么这不起作用？

结合jQuery脚本

2 个答案: