Javascript JQuery切换函数在单击时不加载，仅在第三次单击时加载

当我点击汉堡导航时，我试图在背景淡入后让菜单信息下拉。但当我点击导航时，它不会立即工作。只会褪色。连续单击后，它会工作。我做错了什么？如何在第一次单击时使其工作

请尝试以下代码

$header_top.find('a').on('click', function() {
    $(this).parent().toggleClass('open-menu');
    $('.navOpen')
        .css('opacity', 0).delay(800)
        .show()
        .slideDown('slow')
        .animate(
            { opacity: 1 },
            { queue: false, duration: 'slow' }
    ).toggle();
});

---

就是那个。

$header_top.find('a').on('click', function() {
    $(this).parent().toggleClass('open-menu');
    $('.navOpen')
        .css('opacity', 0).delay(800)
        .show()
        .slideDown('slow')
        .animate(
            { opacity: 1 },
            { queue: false, duration: 'slow' }
    ).toggle();
});