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

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

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

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

最佳答案:

3 个答案:

答案 0 :(得分:2)

没有像$ window这样的内容,它会给你错误并且不会运行脚本更改 $ window.width()

$(window).width()

$ window会给你一个未定义的错误

答案 1 :(得分:0)

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

答案 2 :(得分:0)

也许是因为你的$ 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>
本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复