javascript - ToggleClass and SlideToggle with Class Selector

Question

I have a problem regarding the class selector. I have this hamburger menu that is only shown in certain window size (small). In order to show/hide the hidden menu, you need to click the hamburger menu itself. Those menu hidden have submenus as well and can be shown by clicking the dropdown button.

Then here's my problem, when the window gets resized, the list hidden from the hamburger menu must be hidden, as well as the submenus. However, those lines of codes that were meant to close the hamburger menu (toggleClass and slideToggle as shown) only works when you manually click the close button, but not in resizing. I've investigated and found out that $subMenu didn't point to element that has sub-menu-open class, therefore the toggleClass and slideToggle didn't work. This is not the case for manually clicking the close button of hamburger menu (also calls closeNav function). In both scenario, if $('#nav-main ul').find('li').hasClass('sub-menu-open') is true so the slideToggle and toggleClass are the only items who aren't working.

I hope you can help me.

Jquery

    $subMenu       = $('#nav-main ul').find('.sub-menu-open')
    openNav = () ->

        # Insert stuff here
        $container.toggleClass('menu-open', true)

        if $(window).width() > collapseWidth and ! $('body').hasClass('landing-page')
            $menuCollapsed.stop(true, true).slideDown()
        else
            $navigation.stop(true, true).slideDown()

        # Close navigation on window resize
        $(window).on('resize', closeNav)

        return

    closeNav = () ->

        # Insert stuff here
        $container.toggleClass('menu-open', false)

        # Hide menus
        if $(window).width() > collapseWidth and ! $('body').hasClass('landing-page')
            $menuCollapsed.stop(true, true).slideUp()
        else
            $navigation.stop(true, true).slideUp()

        if $('#nav-main ul').find('li').hasClass('sub-menu-open')
        $subMenu.toggleClass('sub-menu-open')
        $subMenu.find('.sub-menu').stop(true, true).slideToggle()

HTML ELEMENTS

    <nav class="nav-main" id="nav-main" style="display: block;">
      <ul class="menu">
        <li class="menu-item menu-item-icon">Library</li>
        <li class="menu-item menu-item-icon">Store</li>
        <li id="menu-classroom" class="menu-item menu-item-icon sub-menu-open">
            <a href="#" class=""><i class="icon-classroom"></i> Classroom</a>
            <a href="#" class="toggle-submenu">&nbsp;</a>
            <ul class="sub-menu" style="display: block;">
                <li class="menu-item menu-item-icon">Feedback</li>
                <li class="menu-item menu-item-icon">Setup</li>
                <li class="menu-item menu-item-icon">Mandatory assessments</li>
            </ul>
        </li>
      </ul>
    </nav>

Answer 1

等待大神答复