CODEWITHSUNDEEP
jquerycsstwitter-bootstrap-3responsive-design
vk3
vk3

Reputation: 53

Bootstrap 3 collapse menu not closing on click away

I'm trying to build Bootstrap responsive website, and I'm working on the top navigation bar.

I understood that by default, the collapsing menu that is created on smaller screens in not closing/ hiding automatically when clicking away.

Looked for jquery solution but there is an issue with this solution.

It tries to "close" the collapsing menu even if it is not open, and the result is top nav bar flickering.

Can you please help with more accurate solution or a correct "if" statement for the above, so it would close the collapsing menu only if it is open ?

That how it looks https://jsfiddle.net/vkiril3/gb1Lfkjk/

Please expand the Result windows as in picture attached, so you'll see the Search (loupe) button. Now, refresh and click somewhere inside the Result. Top bar will flicker.

Print Screen

Here I catched the flickering

Flicker

    <body>
    <nav class="navbar navbar-custom navbar-fixed-top"> <a class="navbar-brand" href="#">
            <img alt="Brand" src="images/logo70.png" /></a>

        <div class="container">
            <div class="navbar-header">
                <div class="btn-group pull-left">
                    <button type="button" class="btn btn-oldstyle navbar-btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">כניסת עובד&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-log-in" aria-hidden="true"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-left" role="menu" style="padding: 15px; min-width: 250px;">
                        <form>
                            <input type="email" class="form-control" id="exampleInputEmail1" style="direction: ltr;" placeholder="Username" required="required" autofocus="autofocus" />
                            <input type="password" class="form-control" id="exampleInputPassword1" style="direction: ltr;" placeholder="Password" required="required" />
                            <div class="checkbox pull-right">
                                <label>
                                    <input type="checkbox" /><span style="padding-right: 25px;">זכור אותי</span>

                                </label>
                            </div>
                            <button type="submit" class="btn btn-oldstyle btn-block">כניסה</button>
                        </form>
                    </ul>
                </div>
                <div class="btn-group navbar-left visible-sm" style="padding-left: 15px;">
                    <button type="button" class="btn btn-oldstyle navbar-btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-left" role="menu">
                        <form class="navbar-form" role="search" style="direction: ltr;">
                            <div class="form-group">
                                <div class="input-group"> <span class="input-group-btn">
                                        <button class="btn btn-oldstyle" type="submit"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                                    </button>
                                    </span>
                                    <input type="text" class="form-control" placeholder="חיפוש באתר" style="direction: rtl; width: 250px" />
                                </div>
                            </div>
                        </form>
                    </ul>
                </div>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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 id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active navbar-right"><a href="#">דף הבית</a>
                    </li>
                    <li class="navbar-right"><a href="#">אירועים</a>
                    </li>
                    <li class="navbar-right"><a href="#">אודותינו</a>
                    </li>
                    <li class="navbar-right"><a href="#">צור קשר</a>
                    </li>
                </ul>
                <form class="navbar-form navbar-left hidden-sm" role="search" style="direction: ltr;">
                    <div class="form-group">
                        <div class="input-group"> <span class="input-group-btn">
                                <button class="btn btn-oldstyle" type="submit"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                            </button>
                            </span>
                            <input type="text" class="form-control" placeholder="חיפוש באתר" style="direction: rtl;" />
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </nav>
    <script type="text/javascript">
        $('.dropdown-menu').click(function(event) {
            event.stopPropagation();
        }); // Prevent dropdown menu from closing
    </script>
    <script>
        $(document).on('click', function() {
            $('.collapse').collapse('hide');
        })
    </script>
</body>

Upvotes: 2

Views: 1213

Answers (1)

vk3
vk3

Reputation: 53

This is kind of jquery solution I formulated from few jquery scripts I found related to this issue.

Is there anything more neater ? Please give your opinion on the logic.

<script>
    $('body').click(function (event) {
        // only do this if navigation is visible, otherwise you see jump in navigation while collapse() is called 
        if (!($(event.target).is('#navbar *')) && $(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible")) {
            $('.navbar-collapse').collapse('toggle');
        }
    });
</script>

Upvotes: 1

Related Questions