0

比較的一般的で無料の Storefront WooTheme を含む、多くのワードプレス テーマで使用されるブートストラップ ナビゲーション メニューの機能がやや不完全であるように思われます。私が最近遭遇した問題の 1 つは、小さなウィンドウに圧縮されたナビゲーション ボタンが表示されるようにウィンドウのサイズを変更すると、そのボタンをクリックしてメニューを展開する (「ホーム」、「ショップ」などを表示する) ことです。 ...)、その後、ナビゲーション メニューが開いた状態でウィンドウのサイズを非常に大きなサイズに戻すと、まだトグル状態であるため、単純に消えてしまいます。

問題は、テーマを更新してこの問題を修正し、ウィンドウのサイズを変更したときにメニューが閉じられるようにするにはどうすればよいかということです。

4

2 に答える 2

0

次のようなものを JavaScript に追加すると、サイズ変更時にナビゲーション ボタンの切り替えをトリガーするイベント リスナーがウィンドウに追加されます。

if(window.attachEvent) {
        window.attachEvent('onresize', function() {
        alert('attachEvent - resize');
        if ( -1 !== container.className.indexOf( 'toggled' ) ) {
        container.className = container.className.replace( ' toggled', '' );
        button.setAttribute( 'aria-expanded', 'false' );
        menu.setAttribute( 'aria-expanded', 'false' );
    }
        });
}
else if(window.addEventListener) {
        window.addEventListener('resize', function() {
        //console.log('addEventListener - resize');
        if ( -1 !== container.className.indexOf( 'toggled' ) ) {
        container.className = container.className.replace( ' toggled', '' );
        button.setAttribute( 'aria-expanded', 'false' );
        menu.setAttribute( 'aria-expanded', 'false' );
    }
        }, true);
}
else {
        //The browser does not support Javascript event binding
}

これを Storefront WooTheme に追加するには、.../themes/storefront/inc/js/navigation.js および navigation.min.js ファイルを子テーマの下の adir にコピーし、上記をコピーした navigation.js に追加します。ファイル (button.onclick ブロックの直後に追加しました) を作成し、そのファイル全体をスクリプト コンデンサー (オンラインで入手可能) にコピー アンド ペーストして、スクリプトを最小化し、子の navigation.min.js ファイルの既存の内容を置き換えます。その凝縮されたコードでテーマを作成し、もちろん保存してください。

次に、子テーマの JavaScript は対応する親テーマを自動的にオーバーライドしないため、次のようにエンキューする必要があります。

add_action('wp_enqueue_scripts', 'wpse26822_script_fix', 20120207);
function wpse26822_script_fix()
{
    wp_dequeue_script('storefront-navigation');
    wp_enqueue_script('my_storefront-navigation', get_stylesheet_directory_uri().'/js/navigation.min.js', array('jquery'),20151110,true);
}

この場合、wp_enqueue_scripts は 20120206 (日付) の優先度で親によって呼び出されたため、このアクションはすぐにデキューされるようにわずかに高い優先度で追加されます。次に、その後に続くエンキュー ステートメントは、実際にはその後に優先順位が付けられ、古いステートメントがデキューされた後に確実にロードされます。この場合、「true」も重要です。これは、親スクリプトが最初にエンキューされた場所であるフッターにエンキューされることを指定するためです。

于 2015-11-11T01:12:12.380 に答える
0

「.menu_class」をメニュー ul のクラスに置き換えます。

$(window).resize(function(){

  if ($(window).width() > 992) {
    $(".menu_class").removeAttr("style");
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

于 2015-11-11T01:15:37.623 に答える