Question

根据窗口的大小，我正在尝试更改标记的类：

<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

此脚本完美地运行，而不会声明 $（窗口）。

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

用于更改<ul>标记中的类的Javascript无法正常工作

3 个答案: