折叠侧面导航点击响应

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了折叠侧面导航点击响应相关的知识,希望对你有一定的参考价值。

我根据自己的意愿调整了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");
});

以上是关于折叠侧面导航点击响应的主要内容,如果未能解决你的问题,请参考以下文章

点击时隐藏 Twitter Bootstrap 导航折叠

Twitter Bootstrap:多个响应式可折叠导航?

Bootstrap 4 使用切换按钮连接侧面菜单(响应式)

jquery实现的点击可以展开折叠的垂直导航菜单

网站代码html设置折叠效果?网站产品导航设置

Bootstrap 3.0.0 导航垂直折叠响应