如何隔离 html 行，以便 javascript 不影响它并因此在单击时关闭导航栏？

Question

我有一个导航栏，在单击时会关闭并向下滚动页面。 如何仅隔离具有下拉菜单的“信息”链接，以便在单击时不会关闭导航栏？ 这是代码，我使用的是 bootstrap 3.3。

<nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top"><img class="logoClass" src="img/Logo.png"
                        alt="Logo" /></a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#page-top">Home</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#portfolio">Portfolio</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#services">Services</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#about">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contact">Contact</a>
                    </li>
                    <li>
                        <a href="" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Info<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="./services/FAQs">FAQ's</a></li>
                          
                        </ul>
                    </li>
                    <li>
                        <a href="https://www.*********.com/blog/">Blog</a>
                    </li>
                    <li>
                        <a href="commercial/">Commercial</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

// Highlight the top nav as scrolling occurs
$('body').scrollspy({
    target: '.navbar-fixed-top'
})

// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
    $('.navbar-toggle:visible').click();
}); 

谢谢您的帮助。 我意识到这可能非常简单，但我不知道任何 Javascript 或 Jquery，我只知道足够的 html 和 css 来度过难关。

Answer 1

单击菜单项时，底部的这段代码会触发菜单关闭：

// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
    $('.navbar-toggle:visible').click();
}); 

删除或注释掉这些行，单击菜单项时菜单不会关闭 - 您需要单击汉堡包图标才能关闭菜单。

编辑：

您可以将 class 添加到您不希望 Javascript 作用的链接，例如：

<li>
    <a href="" class="nav-link dropdown-toggle no-close" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Info<span class="caret"></span></a>
       <ul class="dropdown-menu">
           <li><a href="./services/FAQs">FAQ's</a></li>
                          
       </ul>
</li>

然后修改 css 选择器以排除 javascript 中的该元素：

// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a:not(.no-close)').click(function() {
    $('.navbar-toggle:visible').click();
});