jQuery addCss 和 .removeCss 仅适用于页面刷新

Question

到无序列表

<ul class="sf-navbar sf-menu" id="sfmenu">

我正在使用以下 jQuery 代码，但它仅适用于页面刷新。

jQuery(document).ready(function() {
    if ($(window).width() > 768) {
        $('#sfmenu').removeClass( "nav navbar-nav" ).addClass('sf-navbar sf-menu');
    }
    if ($(window).width() < 768) {
        $('#sfmenu' ).addClass( "nav navbar-nav" ).removeClass( "sf-navbar sf-menu" );
    }
});

我也试过这个：

jQuery(document).ready(function() {
    if ($(window).width() > 768) {
        $('#sfmenu').removeClass( "nav navbar-nav" );
        $('#sfmenu').addClass('sf-navbar sf-menu');
    }
    if ($(window).width() < 768) {
        $('#sfmenu' ).addClass( "nav navbar-nav" );
        $('#sfmenu' ).removeClass( "sf-navbar sf-menu" );
    }
});

但是没有成功。

我也尝试使用 UL 作为

   <ul class="" id="sfmenu">

但是还是没有成功。非常感谢您的建议！

Answer 1

使用$(window).resize()喜欢，

jQuery(document).ready(function() {
   function sfmenuToggle() {
      if ($(window).width() > 768) {
          $('#sfmenu').removeClass( "nav navbar-nav" )
                      .addClass('sf-navbar sf-menu');
      }
      if ($(window).width() < 768) {
          $('#sfmenu' ).addClass( "nav navbar-nav" )
                       .removeClass( "sf-navbar sf-menu" );
      }
    }
    // on window resize
    $(window).resize(function(){
        sfmenuToggle();
    });
    // on page load
    sfmenuToggle();
});

Answer 2

看起来您需要 window 调整大小事件：

$(document).ready(function() {
  $(window).resize(function() {
      if ($(window).width() > 768) 
        $('#sfmenu').removeClass( "nav navbar-nav" ).addClass('sf-navbar sf-menu');
      else
        $('#sfmenu' ).addClass( "nav navbar-nav" ).removeClass( "sf-navbar sf-menu" );
  }).resize();//to trigger on ready
});

Answer 3

您只是运行 .ready 事件的代码，即页面完成加载时的代码。

另外尝试绑定 $(window).on('resize', function () { ...。

Answer 4

使用调整大小事件：

$(window).resize(function(){
if ($(window).width() > 768) {
    $('#sfmenu').removeClass( "nav navbar-nav" ).addClass('sf-navbar sf-menu');
}
if ($(window).width() < 768) {
    $('#sfmenu' ).addClass( "nav navbar-nav" ).removeClass( "sf-navbar sf-menu" );
}
});

Answer 5

是的，那是因为您仅在加载 Dom 时才应用 css 类，无论是否调整 window 大小，这只会发生一次。可能您需要在 window re-size 事件中添加检查 window 大小。

以下是 window 调整大小事件的简单演示，请尝试在 JSfiddle 上调整 window 的大小以了解效果。

JS代码：

$(function () {
 $(window).resize(function () {
    if ($(window).width() > 768) {
        $('p').removeClass("green").addClass('red');
    }
    if ($(window).width() < 768) {
        $('p').removeClass("red").addClass("green");
    }
 });
});

现场演示@JSFiddle：http://jsfiddle.net/dreamweiver/dCug7/51/show

jQuery addCss 和 .removeCss 仅适用于页面刷新

jQuery addCss and .removeCss only works on page refresh

jquery

superfish

navbar