Question

我为自己的愿望调整了一个笨拙的一页模板，但不幸的是，我在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');

    });

Answer 1

您尝试过这样的事情吗？

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

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

Answer 2

好吧，我尝试过：

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

，它可以工作，但是切换图标在关闭后仍停留在中间。它应该回到左侧。有人可以解决这个问题吗？

Answer 3

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

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

折叠点击响应时的侧面导航

3 个答案: