Javascript override of media query

I'm creating a responsive site. I have a media query set up so that when the screen width drops below 768 px a class (lets call it "hiddenClass") is hidden. Then I implement Javascript to toggle this class into view on a button click. The problem I'm running into is that javascript seems to override the media query. So if I shrink the screen below 768px the "hiddenClass" disappears....then I click the button which displays the "hiddenClass".....then click the button once more to hide it on the smaller device again.....now I expand the window and the "hiddenClass" stays hidden even after it gets to the 768px. If I take out the javascript and shrink the window the "hiddenClass" performs like it should...which tells me javascript is overriding it.

Is there a CSS fix to this? I know I could always check for a window resize event in javascript to display the hiddenClass after it reaches 768px. Was just wondering if this can be handled with CSS....or if javascript is the way to fix it.

Update JSfiddle with JS commented out so you can see how it should work...then add in the JS to see the issue described above. The button is the 'menu' navigation element when you shrink the screen down and "hiddenClass" would be the "menu" class in the li's:

http://jsfiddle.net/or5vy17L/1/

HTML:

<ul>
        <li class="menuButton">- Menu -</li>
        <a href="index.html">
            <li class="menu" >
                Home
            </li>
        </a>
        <a href="instagram.html">
            <li class="menu" >
                Instagram
            </li>
        </a>    
        <li class="menu">Clients</li>
        <li class="menu">Nutrition</li>
        <li class="menu">About Me</li>
        <li class="menu">Contact</li>
    </ul>

css:

li {
display:inline;
color:$font-color--nav;
cursor:pointer;
font-size:1.5em;
padding: .7em .7em .7em .7em;
//for space between margins
margin-right:-4px;
border-radius:.5em;
}

ul {
    text-align:center;
}

.menuButton {
    display:none;
}


@media (max-width:768px) {
    ul {
        padding:0px;
    }

    li {
        display:list-item;
        border:1px solid white;
        padding:.2em .2em .2em .2em;
        border-radius:0px;
    }

    .menu {
        display:none;
    }

     .menuButton {
        display:list-item;
     }
}

javascript:

/****
$('ul').on('click', '.menuButton', function() {
    $('.menu').slideToggle();
});
****/