当屏幕尺寸小于xxx px时如何添加一些类?

时间:2014-04-21 04:11:25

标签: jquery

我正在尝试为我的新项目宽度slidetoogle功能创建一个移动菜单。

jQuery(document).ready(function($) {

    $('.allCategories').click(function(event) {
        $('.categoryContainner').slideToggle('300');
    });


    var mobileMenu = $(window).width();

    $(window).resize(function() {
      mobileMenu = $(window).width();
      if (mobileMenu < 440) {

          $('#allCategroyList').addClass('class_name')();
      }
    });

});

html:

<div class="bar">
    <div class="content">
        <span class="info">
            <i class="fa fa-bars"></i> Hello we have <strong>2711</strong> HD quality documantary videos in <strong>51</strong> categories.
        </span>
        <span class="allCategories">
            <i class="fa fa-angle-double-down"></i> All Categories
        </span>
    </div>
</div>
<div class="content">
    <div class="categoryContainner">
        <div class="content">
            <nav id="allCategroyList">
                <ul>
                    <li><a href="">Category Link 1</a></li>
                    <li><a href="">Category Link 2</a></li>
                    <li><a href="">Category Link 3</a></li>
                    <li><a href="">Category Link 4</a></li>
                    <li><a href="">Category Link 5</a></li>
                    <li><a href="">Category Link 6</a></li>
                    <li><a href="">Category Link 7</a></li>
                    <li><a href="">Category Link 8</a></li>
                    <li><a href="">Category Link 9</a></li>
                    <li><a href="">Category Link 10</a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>

它对我不起作用?任何人都可以帮助我。感谢。

修改

解决方案是,

var mobileMenu = $(window).width();

        $(window).resize(function() {
          mobileMenu = $(window).width();
          if (mobileMenu < 440) {

              $('#allCategroyList').addClass('class_name');
          }
        });

感谢快速重播。

1 个答案:

答案 0 :(得分:1)

尝试在addClass()语句后删除该额外的一组括号,因为它会导致以下错误Uncaught TypeError: object is not a function

  $('#allCategroyList').addClass('class_name')();
                                  ------------^