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”类添加到列表项中。

在菜单选择上自动关闭Toggle-nav菜单

1 个答案: