jQuery响应菜单，桌面功能错误

Question

我正在使用这个 jQuery 代码来创建一个移动响应菜单。

显示移动菜单时效果很好。但是，在菜单显示桌面版本的横向平板电脑上，首次单击下拉/子菜单会立即出现，然后脚本会添加 display:none 并立即将其隐藏。

因此，该行为符合其目的，但是当移动菜单替换为桌面版本时，大型触摸屏设备的 onclick 功能会失败。可以再次单击它，脚本允许正确使用。但是为了用户体验，需要点击两次是不可接受的。

这是一个主题，其中菜单从移动设备更改为桌面的屏幕尺寸可能因站点而异，我不想在每次构建时都更改它。所以我追求的是一个更“通用”的解决方案。谢谢。

这里是 jQuery：

// MOBILE NAVIGATION MENU

( function() {
var nav = document.getElementById( 'site-navigation' ), button, menu;
if ( ! nav ) {
    return;
}

button = nav.getElementsByTagName( 'button' )[0];
menu   = nav.getElementsByTagName( 'ul' )[0];
if ( ! button ) {
    return;
}

// Hide button if menu is missing or empty.
if ( ! menu || ! menu.childNodes.length ) {
    button.style.display = 'none';
    return;
}

button.onclick = function() {
    if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
        menu.className = 'nav-menu';
    }

    if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
        button.className = button.className.replace( ' toggled-on', '' );
        menu.className = menu.className.replace( ' toggled-on', '' );
    } else {
        button.className += ' toggled-on';
        menu.className += ' toggled-on';
    }
};
} )(jQuery);

(function(){
 jQuery('#site-navigation .menu-item-has-children > a').click(function(e){  
      e.preventDefault();
      if (jQuery(this).parent().children('.sub-menu:first').is(':visible')) 
{
           jQuery(this).parent().children('.sub-menu:first').hide(200);
      } else {
           jQuery(this).parent().children('.sub-menu:first').show(200);
      }
 });
});

最后一个功能是使移动子菜单正常工作，但也破坏了移动设备的桌面版本。

PS，我的 JS/jQuery 技能非常糟糕，非常清楚，准确的说明将不胜感激。

Answer 1

 if (jQuery(this).parent().children('.sub-menu:first').is(':visible')) 
{
           jQuery(this).parent().children('.sub-menu:first').hide(200);
      }

看起来你在它变得可见后隐藏了它。您需要删除该声明。 .hide()