JQuery切换功能在点击时不加载，仅在第三次点击时加载

Question

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

https://jsfiddle.net/mo16z57j/

// variables
var $header_top = $('.header-top');
var $nav = $('nav');


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

Answer 1

尝试以下代码

$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();
});