CODEWITHSUNDEEP
jquerytwitter-bootstrapnavigationnavbar
Anuja P
Anuja P

Reputation: 2143

Two bootstrap mobile navbar on same page breaks first time

We are using two bootstap nav bar for mobile version of web page. both have different target, What I want is when one gets open other navbar has to gets closed automatically.

I have added onclick method on both button which do collapse hide for other nav and everything working fine except first click.

When we click on any of them, both navbar gets open and once closed this first time rest of the time everything works fine.

Two bootstrap mobile navbar on same page breaks first time. It opens both tab same time after closing fist it will start toggle correctly.

Fist Tab

<button data-target=".top-menu" data-toggle="collapse" class="navbar-toggle" type="button" onclick="$('.about-menu').collapse('hide');" >
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse top-menu" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
      <li><a href="x.html">x</a></li>
        <li><a href="y.html">y</a></li>
        <li><a href="z.html">z</a></li>                
    </ul> 
</div>

Second Tab

<button data-target=".about-menu" data-toggle="collapse" class="navbar-toggle" type="button" onclick="$('.top-menu').collapse('hide');">                        
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse about-menu" id="bs-example-navbar-collapse-2" >
    <ul class="nav navbar-nav">
      <li><a href="javascript:void(0)" >xxxxx</a></li>
      <li><a href="javascript:void(0)" >yyyy</a></li>                
    </ul> 
</div>

Upvotes: 0

Views: 2396

Answers (2)

Anuja P
Anuja P

Reputation: 2143

As per my understanding bootstrap nav bar uses 'in' class for toggling nav state. so I have added 'in' class. but with this class for fraction of sec. nav bar gets displayed and then gets hide. so to overcome this I have added the hide class then call collapse function and removed that class. Now everything is working fine. 

 $( window ).load(function() {
    $('.about-menu').addClass('hide in');
    $('.about-menu').collapse('hide');
    $('.about-menu').removeClass('hide');

    $('.top-menu').addClass('hide in');     
    $('.top-menu').collapse('hide');
    $('.top-menu').removeClass('hide');
 });

Upvotes: 2

Suganth G
Suganth G

Reputation: 5156

Try this:

Just give this in your script or in page load

HTML:

<nav class="navbar navbar-default" role="navigation">
<button id="btn1" data-target=".top-menu" data-toggle="collapse" class="navbar-toggle" type="button"  >
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
</button>

<div class="collapse navbar-collapse top-menu" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
      <li><a href="x.html">x</a></li>
        <li><a href="y.html">y</a></li>
        <li><a href="z.html">z</a></li>                
    </ul> 
</div>

<button id="btn2" data-target=".about-menu" data-toggle="collapse" class="navbar-toggle" type="button" >                        
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

<div class="collapse navbar-collapse about-menu" id="bs-example-navbar-collapse-2" >
    <ul class="nav navbar-nav">
      <li><a href="javascript:void(0)" >xxxxx</a></li>
      <li><a href="javascript:void(0)" >yyyy</a></li>                
    </ul> 
</div>
</nav>

SCRIPT:

    var flag = 1;
$("#btn1").click(function () {
    if (flag != 1) {
        $('.about-menu').collapse('hide');
    }
    flag = 2;
});
$("#btn2").click(function () {
    if (flag != 1) {
        $('.top-menu').collapse('hide');
    }
    flag = 2;
});

Upvotes: 1

Related Questions