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

【问题标题】：jQuery addCss and .removeCss only works on page refreshjQuery addCss 和 .removeCss 仅适用于页面刷新
【发布时间】：2015-08-03 21:28:36
【问题描述】：

到无序列表

<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">

但仍然没有成功。建议将不胜感激！

【问题讨论】：

你是如何触发事件的？
如果屏幕是768px怎么办？

标签： jquery navbar superfish

【解决方案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();
});

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

看起来你需要调整窗口大小事件：

$(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
});

【讨论】：

【解决方案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" );
}
});

【讨论】：

【解决方案5】：

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

下面是一个简单的window re-size事件demo，尝试在JSfiddle上re-sizing 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

【讨论】：