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()之类的，

public static function gettext()
{
    //include the libs
    include(Config::get('PATH_LIBS')."streams.php");
    include(Config::get('PATH_LIBS')."gettext.php");

    //define all the language settings
    define('LOCALE', 'en_GB');
    define('SESSION_LOCALE_KEY', 'locale');
    define('DEFAULT_LOCALE', 'en_GB');
    define('LOCALE_REQUEST_PARAM', 'lang');
    define('WEBSITE_DOMAIN', 'messages');

    //check if the language exists
    if(array_key_exists(LOCALE_REQUEST_PARAM, $_REQUEST)):
            $current_locale = $_REQUEST[LOCALE_REQUEST_PARAM];
            $_COOKIE[SESSION_LOCALE_KEY] = $current_locale;
    elseif(array_key_exists(SESSION_LOCALE_KEY, $_COOKIE)):
            $current_locale = $_COOKIE[SESSION_LOCALE_KEY];
    else:
            $current_locale = DEFAULT_LOCALE;
    endif;

    //will eventually stick this all in the model file
    putenv("LC_TIM=en_GB");
    putenv("LC_MESSAGES=$current_locale");
    setlocale('LC_ALL', $current_locale);

    //bind it all 
    bindtextdomain(WEBSITE_DOMAIN, Config::get('PATH_MAIN').'lang/');
    bind_textdomain_codeset(WEBSITE_DOMAIN, 'UTF-8');
    textdomain(WEBSITE_DOMAIN);
}

Answer 2

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

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

Answer 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
});

Answer 4

使用resize事件：

$(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 re-size事件中添加检查窗口大小。

以下是窗口重新调整大小事件的简单演示，尝试重新调整JSfiddle上的窗口大小以了解效果。

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仅适用于页面刷新

5 个答案: