How do I isolate a line of html so that the javascript doesn't effect it and consequently close the nav bar when clicked?

Question

I have a nav bar that closes and scrolls down the page when clicked. How do I isolate just the "Info" link which has a dropdown menu so that it doesn't close the nav bar when clicked? Here is the code, I'm using 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();
}); 

Thanks for the help! I realize this is probably pretty simple but I don't know any Javascript or Jquery and I only know enough html and css to get by.

Answer 1

This section of code at the bottom triggers the menu to close when a menu item is clicked:

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

Delete or comment out these lines and the menu won't close when a menu item is clicked - You will need to click the hamburger icon to close the menu.

Edit:

You can add a class to the link you don't want the Javascript to act on, for example:

<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>

Then modify the css selector to exclude that element in the javascript:

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