折叠侧面导航点击响应

Posted 2021-04-18

我根据自己的意愿调整了bougth onepage-template，但不幸的是我在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');

    });

答案

你尝试过这样的事吗？

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

当在侧边栏中单击某些内容时，它将触发mouseup事件

另一答案

好的我试过这个：

// 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');
        });

并且它有效，但是关闭后切换图标保持在中间。它应该回到左侧。有人帮忙解决这个问题吗？

另一答案

您在菜单和按钮上都使用了开放类，因此：

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