选择菜单后自动关闭切换导航菜单

Automatically close Toggle-nav menu upon menu selection

本文关键字：菜单导航选择更新时间：2024-04-30

我需要帮助自动关闭手机上的切换导航菜单。现在，当选择菜单时，它不会关闭。

HTML:

<!-- fixed header -->
    <header id="navbar-top">
        <div class="pt_navbar">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <!-- start menu-->
                        <div id="main-nav">
                            <a href="#" id="toggle-nav"><i class="fa fa-bars"></i> Miracle Trainer</a>
                            <ul class="pt_nav nav">
                                <li class="active">
                                    <a href="#welcome">Welcome</a>
                                </li>
                                <li>
                                    <a href="#portfolio">Training Videos</a>
                                </li>
                                <li>
                                    <a href="#pricing">Pricing</a>
                                </li>
                                <li>
                                    <a href="#contact">Contact</a>
                                </li>
                            </ul>
                        </div>
                        <!-- end menu-->
                    </div>
                </div>
            </div>
        </div>
    </header>

JS:

当选择菜单时，我需要一种关闭切换导航的方法。

$("body").on('click', '#toggle-nav', function(e){
        e.preventDefault();
        var nav_menu = $("#navbar-top .pt_navbar ul");
        if( nav_menu.height() < 10 ){
            nav_menu.addClass('open_menu');
        }else{
            nav_menu.removeClass('open_menu');
        }
});

我目前正在将其用于滑出菜单：

$('.slideout-menu-toggle, .select').on('click', function(event){
    event.preventDefault();
        // create menu variables
    var slideoutMenu = $('.slideout-menu');
    var slideoutMenuWidth = $('.slideout-menu').width();
        // toggle open class
    slideoutMenu.toggleClass("open");
        // slide menu
    if (slideoutMenu.hasClass("open")) {
        slideoutMenu.animate({
        right: "0px"
        });
    } else {
        slideoutMenu.animate({
        right: -slideoutMenuWidth
        }, 400);
    }
});

一些调整可能对你有用。

编辑：考虑到上面的工作代码，我认为你的第一行jQuery应该是这样的：

$('#toggle-nav, .select').on('click', function(e){

并将"选择"类添加到您的列表项中。