jQueryレスポンスメニュー、デスクトップ機能エラー

Question

私はモバイル対応メニューを作成するためにこのjQueryコードを使用しています。

モバイルメニューが表示されても問題なく動作します。ただし、メニューにデスクトップバージョンが表示されている横長のタブレットでは、ドロップダウン/サブメニューの最初のクリックがすぐに表示され、スクリプトには表示：なしが追加され、即座に非表示になります。

このように動作は良好ですが、モバイルメニューをデスクトップバージョンに置き換えると、大きなタッチスクリーンデバイスのonclick機能が失敗します。それは2回目にクリックすることができ、スクリプトは適切な使用を可能にします。しかし、ユーザーエクスペリエンスのために、それを2回クリックする必要は容認できません。

これは、メニューがモバイルからデスクトップに変更される画面サイズがサイトごとに異なる場合があり、それぞれのビルドを変更する必要がないテーマです。だから、もっと普遍的な解決策は私が後にしていることです。ありがとうございました。ここで

は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()