Свернуть Боковая навигация при реагировании на нажатие - PullRequest
Новая
       27

Свернуть Боковая навигация при реагировании на нажатие

0 голосов
/ 06 сентября 2018

Я настраиваю шаблон одной страницы для своих пожеланий, но, к сожалению, я не очень хорош в JS. Итак, у меня есть боковое меню, которое остается в настольной версии. Но на мобильной / планшетной версии у меня есть значок меню переключения. При нажатии открывается меню, но когда я нажимаю на точку навигации, меню остается открытым. Я хотел бы закрыть его после нажатия. Спасибо за вашу помощь 

<aside class="nav_sidebar">
        <div class="menu_wrapper">
            <div class="header_top">

                <div class="head_img_wrap">
                    <img src="images/logo.svg" alt="Images">
                </div>
            </div>

            <div class="main_menu">
                <ul>
                    <li class="active"><a href="#home"><p>Home</p></a></li>
                    <li><a href="#about"><p>Über mich</p></a></li>
                    <li><a href="#service"><p>services</p></a></li>
                    <li><a href="#portfolio"><p>portfolio</p></a></li>
                    <li><a href="#blog"><p>blog</p></a></li>
                    <li><a href="#contact"><p>kontakt</p></a></li>
                </ul>
            </div>
        </div>

    </aside><!-- end header -->

    <!-- menu toggler -->
    <div class="menu_toggler">
        <span class="fa fa-bars" aria-hidden="true"></span>
    </div>
    <!-- menu toggler -->

// Mobile menu css
    var $menu_toggler = $('.menu_toggler'),
        $menuSidebar = $('aside.nav_sidebar');

    $menu_toggler.on('click',function () {
        $(this).toggleClass('open');
        $menuSidebar.toggleClass('open');
    });
    if(windowWidth < 768){$menuSidebar.toggleClass('shrinked');}

    // collapsible menu css
    $('.toggle_icon span').on('click', function () {
        $menuSidebar.toggleClass('collapse');

    });

Ответы [ 3 ]

0 голосов
/ 06 сентября 2018

Хорошо, я попробовал это: 

// Mobile menu css
    var $menu_toggler = $('.menu_toggler'),
        $menuSidebar = $('aside.nav_sidebar');

    $menu_toggler.on('click',function () {
        $(this).toggleClass('open');
        $menuSidebar.toggleClass('open');
    });
    if(windowWidth < 768){$menuSidebar.toggleClass('shrinked');}

    // collapsible menu css
    $menuSidebar.on("mouseup", function() {
    $menuSidebar.removeClass('open');
        });

и это работает, но значок переключения остается в середине после закрытия. Стоит вернуться на левую сторону. Кто-нибудь поможет с этой проблемой?

0 голосов
/ 11 сентября 2018

Вы используете открытый класс как для меню, так и для кнопки, поэтому: 

$menuSidebar.on("mouseup", function() {
    $menuSidebar.removeClass("open");
    $menu_toggler.removeClass("open");
});
0 голосов
/ 06 сентября 2018

Вы пробовали что-то подобное? 

$menuSidebar.on("mouseup", function() {
    $menuSidebar.removeClass('open');
});

Когда на боковой панели нажимается что-то, запускается событие mouseup

...