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

Question

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

当显示移动菜单时，它可以正常工作。然而，在面向横向的平板电脑上，菜单显示桌面版本，下拉/子菜单的初始单击会立即出现，然后脚本会添加一个显示:无并立即隐藏它。

因此，这种行为对于它的目的来说是很好的，但是当移动菜单替换为桌面版本时，用于大型触摸屏设备的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);
      }
 });
});

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

另外，我有危险的糟糕的JS/jQuery技能，所以非常清楚，精确的指示将不胜感激。

Answer 1

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

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