Jquery Метод addClass() работает после загрузки страницы, но не работает после изменения размера (отзывчивое выпадающее меню)

Итак, это мой проект для адаптивного выпадающего меню. Подменю отображаются при наведении курсора на большой экран и отображаются при нажатии на маленьком экране. Я использую addClass, чтобы добавить стиль, когда я нажимаю кнопку, чтобы показать подменю на маленьком экране. но проблема в том, что код отлично работает при первой загрузке, но после того, как я изменил его размер, метод addClass не работает. Любое предложение и помощь приветствуются. Вот моя ссылка на JSFiddle: http://jsfiddle.net/jerrypeng0112/so722nb0/1/

Вот мой код для Jquery:

$(document).ready(function(){
    var navResponsive = function(){
        var w = $(window).width();
        console.log(w);
        if(w>585){
            $('li.dropdown a').off('.click');
            $('li.dropdown').on('mouseenter.hover',function(){
                $(this).find('ul').filter(':not(:animated)').slideDown(400);
            }).on('mouseleave.hover',function(){
                $(this).find('ul').fadeOut(250);
            });
        }else{
            $('li.dropdown').off('.hover');
            $('a#navIcon').on('click',function(e){
                e.preventDefault();
                $('nav').filter(':not(:animated)').slideToggle(400);
            });
            $('li.dropdown a').on('click.click',function(e){
                e.preventDefault();
                if($(this).next('ul').is(':hidden')){
                    $(this).next('ul').filter(':not(:animated)').slideDown(400);
                    $(this).addClass('main_2');
                    $(this).find('span.expand').addClass('expand_2');
                }else{
                    $(this).next('ul').filter(':not(:animated)').slideUp(400);
                    $(this).removeClass('main_2');
                    $(this).find('span.expand').removeClass('expand_2');
                }
            });
        }
    };
    navResponsive();
    $(window).resize(function(){
        navResponsive();
        var w = $(window).width();
        if (w>585){
            $('nav, li.dropdown, li.dropdown ul').removeAttr('style');
        }
    });
});

Вот мой код для CSS:

body{
    background:darkgray;
    font-family:Arial,Sans-serif;
    height:2000px;
}
header{
    position:fixed;
    width:100%;
    height:40px;
    top:0;
    background:black;
}
h1{
    font-size:24px;
    display:inline-block;
    color:white;
    line-height:40px;
    height:40px;
    margin-left:8px;
}
nav{
    width:400px;
    height:40px;
    float:right;
}
nav ul{
    list-style-type:none;
    margin:0;
    padding:0;
    float:left;
}
nav ul li{
    display:inline-block;
    float:left;
}
nav ul li a{
    display:inline-block;
    text-align:center;
    text-decoration:none;
    width:80px;
    height:40px;
    line-height:40px;
    background:#404040;
    color:white;
}
ul.hidden{
    display:none;
    position:absolute;
}
ul.hidden li{
    display:block;
    float:none;
}
ul.hidden li a{
    background:;
    width:auto;
    padding:0 20px;
    height:40px;
    line-height:40px;
}
a#navIcon{
    display:none;
}
span.expand{
    display:none;
}
@media screen and (max-width:540px){
    .main_2{
        background:dimgray;
    }
    span.expand_2{
        transform:rotate(45deg);
        top:-10px;
        font-size:24px;
    }
    nav{
        display:none;
        width:100%;
        height:auto;
    }
    nav ul{
        width:100%;
        height:auto;
    }
    nav ul li{
        display:block;
        width:100%;
        height:auto;
    }
    nav ul li a{
        width:100%;
        text-align:left;
        padding-left:20px;
        border-bottom:1px solid black;
    }
    ul.hidden{
        display:none;
        width:100%;
        height:auto;
        position:relative;
    }
    ul.hidden li{
        width:100%;
    }
    ul.hidden li a{
        width:100%;
        padding-left:10%;
    }
    span.expand{
        font-size:20px;
        color:white;
        display:block;
        float:right;
        margin-right:40px;
    }
    a#navIcon{
        display:block;
        float:right;
        margin:8px 10px 0 0;
        font-size:24px;
        color:white;
        text-decoration:none;
    }
}

Вот мой код для HTML:

<body>
    <header>
    <h1>SITE TITLE</h1>
    <a href="#" id="navIcon">&#9776;</a>
    <nav>
      <ul id="main">
            <li><a href="#">Home</a></li>
            <li class="dropdown"><a href="#">About<span class="expand">+</span></a>
                <ul class="hidden">
                    <li><a href="#">About 1</a></li>
                    <li><a href="#">About 2</a></li>
                    <li><a href="#">About 3</a></li>
                </ul>
            </li>
            <li class="dropdown"><a href="#">Services<span class="expand">+</span></a>
                <ul class="hidden">
                    <li><a href="#">Services 1</a></li>
                    <li><a href="#">Services 2</a></li>
                    <li><a href="#">Services 3</a></li>
                </ul>
            </li>
            <li class="dropdown"><a href="#">History<span class="expand">+</span></a>
                <ul class="hidden special">
                    <li><a href="#">The History 1</a></li>
                    <li><a href="#">The History 2</a></li>
                    <li><a href="#">The History 3</a></li>
                </ul>
            </li>
            <li><a href="#">Contact</a></li>
      </ul>
    </nav>
</header>
</body>