CODEWITHSUNDEEP
javascriptjqueryhtmlcss
tester
tester

Reputation: 459

on click outside of a div dropdown menu is hiding but the toggle is not displaying

I have created responsive bootstrap menu and added jquery code for hiding the dropdown div if we are clicking outside the div(togglebar).But the problem is once i click on outside div to close the toggle bar it is not displaying toggle bar correctly still displaying cross symbol after closing the dropdown menu after clicking.

<nav class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="navbar-header">
        <button type="button" id="ChangeToggle" class="navbar-toggle dropbtn" data-toggle="collapse" data-target="#navbar-collapse-1">
            <div id="navbar-hamburger">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </div>
            <div id="navbar-close" class="hidden">
                <span class="glyphicon glyphicon-remove"></span>
            </div>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
    </div>
</nav>

Jquery:

<script type="text/javascript">
    $(function() {
        $('#ChangeToggle').click(function() {
            $('#navbar-hamburger').toggleClass('hidden');
            $('#navbar-close').toggleClass('hidden');  
        });
     });
</script>
<script>
    $(document).on('click',function(){
        $('.collapse').collapse('hide');
        $('#navbar-hamburger').toggleClass('show');
        $('#navbar-close').toggleClass('hidden'); 
    })
</script>

Upvotes: 2

Views: 1733

Answers (2)

Biswajit Nath
Biswajit Nath

Reputation: 433

Try this. 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>


<nav class="navbar navbar-default navbar-static-top" role="navigation">
        <div class="navbar-header">
            <button type="button" id="ChangeToggle" class="navbar-toggle dropbtn" data-toggle="collapse" data-target="#navbar-collapse-1">
                <div id="navbar-hamburger">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </div>
                <div id="navbar-close" class="hidden">
                  <span class="glyphicon glyphicon-remove"></span>
                </div>
            </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>
        </nav>
</body>

</html>

 <script type="text/javascript">
        $(function() {
          $('#ChangeToggle').click(function() {
            $('#navbar-hamburger').toggleClass('hidden');
            $('#navbar-close').toggleClass('hidden');  
          });
        });
    </script>
    <script>

        $(document).on("click", function(event){
        var $trigger = $(".navbar");
        if($trigger !== event.target && !$trigger.has(event.target).length){
            $('.collapse').collapse('hide');
        $('#navbar-close').addClass('hidden');
        $('#navbar-hamburger').removeClass('hidden');
        }            
    });
    </script>

Let me talk about your problem. Actually you are triggering on whole document including the navbar. That's why your navbar also toggling class. try collapse the navbar and toggle the button when you click outside the navbar (except navbar element)

Upvotes: 3

vrijdenker
vrijdenker

Reputation: 1431

When clicking the hamburger button you toggle the class 'hidden'.

$('#navbar-hamburger').toggleClass('hidden')

But when you click the document you toggle the class 'show'

$('#navbar-hamburger').toggleClass('show')

That doesn't make sense to me. You should toggle the same class each time I guess.

Upvotes: 0

Related Questions