Bootstrap: Jquery: NavBar: Collapse all links including dropdown toggle

Question

I have a bootstrap navbar as follows:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
    <div class="navbar-header nav-tabs" style="border-bottom:none;">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse">
       <ul class="nav navbar-nav navbar-right" style="padding-top:20px">
           <li>
        <a href="" class="dropdown-toggle" data-toggle="dropdown">
            Information&nbsp;<span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li>
                <a href="/Home/Terms">Terms &amp; Conditions</a>
            </li>
            <li>
                <a href="/Home/Privacy">Privacy Policy</a>
            </li>
            <li>
                <a href="/Home/ContactUs">Contact Us</a>
            </li>
        </ul>
        </li>
        </ul>
    </div>
</div>

And I collapse the menu when clicked outside the navbar menu as follows:

$("body").on('click', function(event){
    var container = $(".navbar");    
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.collapse('hide');
    }
});

When clicked outside, the dropdown menu links collapse; but, how do I collapse the "Information"(dropdown-toggle) link too? Any help is appreciated.

Edit: Looked at the post How to close an open collapsed navbar when clicking outside of the navbar element in Bootstrap 3?

The solution seems to work for me in Bootstrap Compiler, but, it collapses the menu even if I click inside the navbar. How do I solve that issue?

$(document).click(function (event) {
    var clickover = $(event.target);
    var _opened = $(".navbar-collapse").hasClass("navbar-collapse collapse in");
    //if (_opened === true && !clickover.hasClass("navbar-toggle")) {
    if (_opened === true && !clickover.hasClass("navbar-toggle")) {            
        $("button.navbar-toggle").click();
    }
});

Hi check [this](https://jsfiddle.net/76egsryq/) see if that works for you or not . — Swati, Oct 29 '20 at 04:34

kblau · Accepted Answer · 2020-10-29T19:40:18.687

https://dotnetfiddle.net/qMDjF5

View

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index23</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(function () {
            $("#theButton").css("display", "none");
            $(document).click(function (event) {
                var target = $(event.target);
                if (target.is("html")) {
                    $(".dropdown-toggle").css("visibility", "hidden");
                    $(".navbar-toggle").css("display", "none")
                    $("#theButton").css("display", "block");
                }
                else if (!target.is("button")) {
                    alert("You need to View in Full Screen, so you can click in the body, which is below the Navigation. You clicked " + event.target.nodeName)
                }
            });
            $("#theButton").click(function () {
                $(".dropdown-toggle").css("visibility", "visible");
            })
        })
    </script>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header nav-tabs" style="border-bottom:none;">
                <button id="theButton">Toggle navigation</button>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    Toggle navigation
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right" style="padding-top:20px">
                    <li>
                        <a href="" class="dropdown-toggle" data-toggle="dropdown">
                            Information&nbsp;<span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="/Home/Terms">Terms &amp; Conditions</a>
                            </li>
                            <li>
                                <a href="/Home/Privacy">Privacy Policy</a>
                            </li>
                            <li>
                                <a href="/Home/ContactUs">Contact Us</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</body>
</html>

Bootstrap: Jquery: NavBar: Collapse all links including dropdown toggle

1 Answers1