jQuery .slideToggle, display:none

Question

I have a logic problem. I have a CSS drop down menu, which when the browser, or mobile phone, width is less that 690pixles becomes a menu that is only displayed on a toggle. Ie the user needs to press a button to display the menu. However, a logic problem is that if you resize the broswer, toggle the menu to open, then close it again and resize the browser to full width the normal menu disappears because slideToggle adds the display:none; style to the div element - which then causes a layout problem and is not very user friendly. Any ideas how to fix?

HTML:

<div id="primary-menu" class="drop-down">
    <div class="menu-toggle">menu-toggle</div>
    <ul id="responsive" class="menu">
        <li class="menu-item"><a href="#">Link 1</a></li>      
        <li class="menu-item"><a href="#">Link 2</a>
            <ul class="child-menu">
                <li class="menu-item"><a href="#">Link A</a></li>
                <li class="menu-item"><a href="#">Link B</a></li>
                <li class="menu-item"><a href="#">Link C</a></li>
            </ul>
        </li>
        <li class="menu-item"><a href="#">Link 3</a></li>
    </ul>
</div>

jQuery:

$(".menu-toggle").click(function(){
    $("#responsive").slideToggle( "slow", function() {});
});

Answer 1

You could show it and hide it on window resize, so that you make sure the menu is always visible in big screens and not visible in small screens.

$( window ).resize(function() {
    if($( window ).width() >= 690) {
        $("#responsive").show();
    }
    else {
        $("#responsive").hide();
   }
});