Question

我有一个使用css bootstrap导航栏的响应式网站。

问题是，在手机上任何点击/点击/触摸屏幕上的任何地方都会导致导航栏崩溃。在第二次点击/单击/触摸时，导航栏会返回。在桌面屏幕上，行为类似，但只会导致屏幕轻弹或刷新，但仍无意。

预期的行为是，导航栏只应在点击/点击/触摸右上角的导航栏图标时折叠。

有关修复此问题的任何帮助吗？

好的，这是代码......

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#XX-header-1">
    <span class="sr-only">Toggle navigation</span>    
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
  </button>
  <a class="navbar-brand visible-xs" href="/home"><img src="XXXX" class="img-responsive" /></a>
  <a class="navbar-brand hidden-xs" href="/home">Home</a>
</div>

<div class="collapse navbar-collapse" id="cb-header-1">

  <ul class="nav navbar-nav">

    <li <?php XXX ?> ><a href="/XXX">XXX</a></li>
    <li <?php YYY ?> ><a href="/YYY">YYY</a></li> 

  <?php if (a==b) { ?>

    <li class="active" >
    <a href="<?php AAA ?>"><span class="glyphicon glyphicon-cog"></span>
    <?php
    SOME CODE HERE
    ?>
    </a>
    </li>
    <li class="active" >
    <a href="/MMM"><span class="glyphicon glyphicon-off"></span> MMM</a></li>

  <?php } else { ?>

    <li <?php NNN ?> ><a href="/NNN"><span class="glyphicon glyphicon-user"></span> NNN</a></li>
    <li <?php OOO ?> ><a href="/OOO"><span class="glyphicon glyphicon-log-in"></span> OOO</a></li>

  <?php } ?>

  </ul>
 </div>
</div>
</nav>

这里是导航栏自定义的CSS

.navbar-default {
    background-color: #FFFFFF;
    border-color: #COLOR1;
}
.navbar-default .navbar-brand {
    color: #COLOR2;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
    color: #COLOR3;
}
.navbar-default .navbar-text {
    color: #COLOR2;
}
.navbar-default .navbar-nav > li > a {
    color: #COLOR2;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #COLOR3;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #COLOR3;
    background-color: #COLOR1;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    color: #COLOR3;
    background-color: #COLOR1;
}
.navbar-default .navbar-toggle {
    border-color: #COLOR1;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #COLOR1;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #COLOR2;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #COLOR2;
}
.navbar-default .navbar-link {
    color: #COLOR2;
}
.navbar-default .navbar-link:hover {
    color: #COLOR3;
}
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #COLOR2;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #COLOR3;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #COLOR3;
        background-color: #COLOR1;
    }
}

Answer 1

这听起来像其中一个元素（可能是切换按钮）未被关闭，或者包含的元素多于应有的元素。你能提供有问题的HTML吗？或者也许是一个jsFiddle？如果没有更多的信息，很难诊断问题。

EDIT: fiddle

Answer 2

js文件中的以下代码导致了这个问题，取出了代码，它开始按照它的方式工作，thx向所有人提供帮助

$（document）.on（'click'，function（）{$（'。collapse'）。collapse（'hide'）;}）

第一次单击或触摸移动屏幕时，引导导航栏会折叠

2 个答案: