Question

我正在使用jQuery移动汉堡菜单：

jQuery( function($) { 'use strict;



$( '<div id="header-mobile-menu">&#x2261; <div class="mH"></div></div>' ).insertBefore( 'nav.nav-header ul.genesis-nav-menu' );

$( 'nav.nav-header ul.genesis-nav-menu' ).addClass( 'hide' );

$('#header-mobile-menu').on( 'click', function() {
    $('nav.nav-header ul.genesis-nav-menu').slideToggle();
    $(this).toggleClass('active');
});

$( '<div id="header-mobile-menu">≡ <div class="mH"></div></div>' ).insertBefore( 'nav.nav-header ul.genesis-nav-menu' ); $( 'nav.nav-header ul.genesis-nav-menu' ).addClass( 'hide' ); $('#header-mobile-menu').on( 'click', function() { $('nav.nav-header ul.genesis-nav-menu').slideToggle(); $(this).toggleClass('active'); }); 问题是单击菜单后菜单不会自动关闭。所以我添加了这个：

});

但现在它适用于所有决议。这并不好。所以我试着改变它：

    $('.menu-item').on( 'click', function() {
    $('nav.nav-header ul.genesis-nav-menu').slideToggle();
    $('#header-mobile-menu').toggleClass('hide');

最后的表现是：

if($(window).width() < 992 ){}


jQuery( function($) { 'use strict';

// Insert mobile menu before the Genesis Header Right widget navigation menu
$( '<div id="header-mobile-menu">&#x2261; <div class="mH"></div></div>' ).insertBefore( 'nav.nav-header ul.genesis-nav-menu' );

// Add .hide class to .nav-header .genesis-nav-menu to hide it for small screen sizes
$( 'nav.nav-header ul.genesis-nav-menu' ).addClass( 'hide' );

// Toggle Header Right widget navigation menu for mobile menu
$('#header-mobile-menu').on( 'click', function() {
    $('nav.nav-header ul.genesis-nav-menu').slideToggle();
    $(this).toggleClass('active');
});

    if($(window).width() < 992 ){
// Hide Header Right widget navigation menu for mobile menu if clicked
    $('.menu-item').on( 'click', function() {
    $('nav.nav-header ul.genesis-nav-menu').slideToggle();
    $('#header-mobile-menu').toggleClass('hide');
})};

它不起作用...请帮助谁知道jQuery语法。

Answer 1

如果您希望该单击处理程序仅在窗口宽度为＆lt; 992，检查里面处理程序：

// Hide Header Right widget navigation menu for mobile menu if clicked
$('.menu-item').on( 'click', function() {
    if( $(window).width() < 992 ){
        $('nav.nav-header ul.genesis-nav-menu').slideToggle();
        $('#header-mobile-menu').toggleClass('hide');
    }
});

在特定的分辨率上应用jQuery

1 个答案: