javascript - 在菜单选择时自动关闭切换导航菜单

Question

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

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

Answer 1

我目前正在使用它作为滑出式菜单:

$('.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){

并将“select”类添加到您的列表项中。