on resizing window click events not releasing click function

Question

I'm trying to create a dropdown menu on click event using jquery. Following is my query.

$(".sidebar-nav li > a").click(function(e) {
        $(this).parent().siblings().find('ul').slideUp(500);
        $(this).next('ul').stop().slideToggle(300);
        return false;
    });

And the below is my html.

<nav class="sidebar-nav">
    <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">about us</a>
            <ul>
                <li><a href="#">profile</a></li>
                <li><a href="#">our vision</a></li>
                <li><a href="#">our mission</a></li>
            </ul>
        </li>
        <li><a href="#">Gallery</a></li>
    </ul>
</nav>

event is working. But my problem is when I active the dropdown and resize the window, the dropdown menus' are still active. I want to refresh the events when I resize the page.

Answer 1

You can just restore the original location of the <ul>s when the window is resized:

$(function () {
  $(window).resize(function () {
    $(".sidebar-nav li > ul").slideUp();
  });
});