带类选择器的 ToggleClass 和 SlideToggle

Question

我有一个关于类选择器的问题。我有这个汉堡菜单，只显示在特定的窗口大小（小）。为了显示/隐藏隐藏菜单，您需要单击汉堡菜单本身。那些隐藏的菜单也有子菜单，可以通过单击下拉按钮显示。

那么这是我的问题，当窗口调整大小时，必须隐藏汉堡菜单中隐藏的列表以及子菜单。但是，那些旨在关闭汉堡菜单的代码行（如图所示的 toggleClass 和 slideToggle）仅在您手动单击关闭按钮时有效，而在调整大小时无效。我调查并发现 $subMenu 没有指向具有子菜单打开类的元素，因此 toggleClass 和 slideToggle 不起作用。手动点击汉堡菜单的关闭按钮（也调用 closeNav 函数）不是这种情况。在这两种情况下，if $('#nav-main ul').find('li').hasClass('sub-menu-open') 为真，因此 slideToggle 和 toggleClass 是唯一不工作的项目。

希望你能帮我。

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 元素

    <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>