Javascript 更改 <ul> 标签中的 class 无效

Question

根据 window 的大小，我正在尝试更改标签的 class：

<ul id="navul" class="nav navbar-nav">

改为：

<ul id="navul" class="nav nav-pills">

这是我正在尝试的方法，但没有用：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $(window).resize(function () {
            $("count").text(x += 1);

            if ($window.width() < 768) {
                $('#navul')
                    .removeClass('navbar-nav')
                    .addClass('nav-pills');
            };
            if ($window.width() > 769) {
                $('#navul')
                    .removeClass('navbar-pills')
                    .addClass('nav-bar');
            };

        });
    });
</script>

我也试过把它包在里面

$(document).ready(function () {
    ....
});

在开发工具中观察 DOM，似乎脚本根本没有触发。我可能遗漏了一些简单的东西。

编辑：

我用这个作为我的起始模板：

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_resize

此脚本完美运行无需声明 $(window)。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
x = 0;
$(document).ready(function(){
    $(window).resize(function(){
        $("span").text(x += 1);
    });
});
</script>

<p>Window resized <span>0</span> times.</p>

Answer 1

没有什么比 $window 更好的了，它会给你错误并且不会运行脚本将 $window.width() 更改为

$(window).width()

$window 会给你未定义的错误

Answer 2

可能是因为您的 $window 变量未定义？
试试这个：

<script type="text/javascript">
    var $window = $(window);
    $window.resize(function () {
        if ($window.width() < 768) {
            if ($('#navul').hasClass('navbar-nav')) {
                $('#navul').removeClass('navbar-nav').addClass('nav-pills');
            }
        };
        if ($window.width() > 769) {
            if ($('#navul').hasClass('nav-pills')) {
                $('#navul').removeClass('nav-pills').addClass('navbar-nav');
            }
        };
    });
</script>

Answer 3

$(window).resize(function () {
  $('#navul')
    .removeClass('navbar-nav nav-pills')
    .addClass(($(window).width() < 768 ) ? 'nav-pills' : 'navbar-nav');
});

Javascript 更改 <ul> 标签中的 class 无效

Javascript to change class in <ul> tag not working

javascript

navigation

asp.net-mvc

twitter-bootstrap