Блог

Главная - Вопросы по программированию - Переключать классы и переключать слайды с помощью селектора классов

Переключать классы и переключать слайды с помощью селектора классов

#javascript #jquery #coffeescript

#javascript #jquery #coffeescript

Вопрос:

У меня есть проблема, связанная с селектором классов. У меня есть это меню гамбургеров, которое отображается только в окне определенного размера (маленькое). Чтобы показать / скрыть скрытое меню, вам нужно щелкнуть само меню гамбургера. Те скрытые меню также имеют подменю, которые можно отобразить, нажав на выпадающую кнопку.

Тогда вот в чем моя проблема: при изменении размера окна список, скрытый из меню гамбургеров, должен быть скрыт, так же как и подменю. Однако те строки кодов, которые предназначались для закрытия меню гамбургера (toggleClass и slideToggle, как показано), работают только при нажатии кнопки закрытия вручную, но не при изменении размера. Я исследовал и выяснил, что $subMenu не указывает на элемент, у которого есть класс submenu-open , поэтому toggleClass и slideToggle не работали. Это не относится к ручному нажатию кнопки закрытия меню гамбургера (также вызывает функцию closeNav). В обоих сценариях if $('#nav-main ul').find('li').hasClass('sub-menu-open') значение true, поэтому 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">amp;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>