CODEWITHSUNDEEP
twitter-bootstrapresponsive-designtwitter-bootstrap-3navbar
Alex Tokolosh
Alex Tokolosh

Reputation: 17

bootstrap navbar button dropdown wont disappear on click

Having a little trouble with the dropdown list on my bootstrap site.

Here

when the navbar has collapsed to the toggleable button and i click on it, it displays the dropdown list correctly, but when I click a link and it goes to the correct section the dropdown list does not disappear like i would like it to.

Its my first bootstrap site and im a newbie webdev... so in spite of scouring the bootstrap site... i have come away empty.

Any help is greatly appreciated.

Alex

Upvotes: 0

Views: 2741

Answers (1)

Suganth G
Suganth G

Reputation: 5156

Try like this:

Set one id to that toggle button, and set common class name to that link button in the navbar, and write the condition like when clicking the link button , the button toggle also clicked together when the nav is in collapsed state like below

DEMO

 <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button id="btnCollapse" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Brand</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a class="a" href="#">Link</a></li>
                        <li><a class="a" href="#">Link</a></li>
                        <li><a class="a" href="#">Link</a></li>
                        <li><a class="a" href="#">Link</a></li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>

SCRIPT:

 $(".a").click(function () {
            if ($("#btnCollapse").css('display')!='none')
            $("#btnCollapse").click();
        });

Upvotes: 2

Related Questions