Question

我们正在使用两个bootstap导航栏来移动版本的网页。两者都有不同的目标，我想要的是当一个人打开时，其他导航栏必须自动关闭。

我在两个按钮上都添加了onclick方法，这对于其他导航系统都会进行折叠隐藏，除了首次点击外，一切正常。

当我们点击其中任何一个时，两个导航栏都会打开，一旦关闭，这是第一次休息时间一切正常。

同一页面上的两个bootstrap移动导航栏第一次中断。它会在关闭拳头后同时打开两个标签，它将开始正确切换。

拳击标签

<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>

第二个标签

<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>

Answer 1

根据我的理解，bootstrap导航栏使用＆＃39;＆＃39;用于切换导航状态的类。所以我添加了＆＃39; in＆＃39;类。但这个类的分数为秒。导航栏显示然后隐藏。所以为了克服这一点，我添加了hide类，然后调用collapse函数并删除了该类。现在一切正常。

 $( 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');
 });

Answer 2

试试这个：

只需在脚本或页面加载中提供

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;
});

同一页面上的两个bootstrap移动导航栏第一次中断

2 个答案: