单击锚链接时引导菜单闪烁

Question

我有一个 bootstrap 3 菜单。我在元素中添加了：data-toggle="collapse" data-target=".navbar-collapse" 以强制菜单在移动视图中单击时关闭，以防止它占用空间并阻止菜单上的文本。效果很好。

但是，在桌面视图中，当单击菜单项时，会导致菜单闪烁并重新加载。闪烁发生在服务器和我的本地副本中，但当我将代码放入 codepen 时不会发生。

我尝试将其设置为仅针对移动设备上的崩溃，但我遗漏了一些东西。

HTML：

 <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid"> 
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
        <a class="navbar-brand" href="#"><img alt="logo here" class="img-responsive logo" src="logo.png" /> </a></div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="topFixedNavbar1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#welcome" data-toggle="collapse" data-target=".navbar-collapse">Welcome</a></li>
          <li><a href="#info" data-toggle="collapse" data-target=".navbar-collapse">Information</a></li>
          <li><a href="#housing" data-toggle="collapse" data-target=".navbar-collapse">Registration &amp; Housing</a></li>
          <li><a href="#security" data-toggle="collapse" data-target=".navbar-collapse">Security &amp; Transportation</a></li>
          <li><a href="#contact" data-toggle="collapse" data-target=".navbar-collapse">Contact</a></li>
          <li class="dropdown"><a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Agendas<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#" target="_blank"><i aria-hidden="true" class="fa fa-file-pdf-o">&nbsp;</i>Agenda 1</a></li>
              <li><a href="#" target="_blank"><i aria-hidden="true" class="fa fa-file-pdf-o">&nbsp;</i>Agenda 2</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse --> </div>
    <!-- /.container-fluid --></nav>

导航上的 CSS 自定义：

.nav {
    font-size: 2em;
}
@media (min-width: 960px) {
    body {
    padding-top: 135px; }
.navbar {
    min-height: 125px;
}
}
.navbar-brand {
    margin-left: 5px !important;
    margin-top: -8px;
}
.navbar-default {
    background-color: #fff;
    border-bottom-color: #fff;
}
.navbar-nav {
    margin: 40px 0 -15px;
}

/*Responsive font size on nav */
@media (max-width:1456px) {
.nav {
    font-size: 1.75em;
}
}

@media (max-width:1337px) {
.nav {
    font-size: 1.5em;
}
}

@media (max-width:1219px) {
.nav {
    font-size: 1.3em;
}
}

@media (max-width:1124px) {
.nav {
    font-size: 1.2em;
}
}

@media (max-width:1078px) {
.nav {
    font-size: 1.15em;
}
}

@media (max-width:1053px) {
.nav {
    font-size: 1em;
}
}

@media (max-width:981px) {
.nav {
    font-size: .95em;
}
}

@media (max-width:959px) {
.navbar-nav > li > a {
    padding-top: 1px;
    padding-bottom: 0;
    line-height: 1;
    font-size: 1.4em;
}
.navbar-nav {
    padding-bottom: 18px;
}
/*
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
    min-height: 125px;
}*/
.navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none; }
    .logo {
        height: 42px;}
}

@media (max-width: 962px) {
.navbar-header {
    float: none;
}
.navbar-left, .navbar-right {
    float: none !important;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-nav {
    float: none!important;
    margin-top: 7.5px;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}
.collapse.in {
    display: block !important;
}
}

感谢您提供的任何帮助或建议！

Answer 1

您的目标是.navbar-collapse，其中包含嵌套在导航栏本身的链接，每次单击时都会引起闪烁。

从链接中删除所有data-toggle="collapse" data-target=".navbar-collapse" 部分，并添加以下代码：

$('.nav a').on('click', function() {
    $('.navbar-collapse').collapse('hide');
});

当您单击导航栏内的链接之一时，这将关闭导航栏。注意：这是一个引导 3.x 解决方案。对于 bootstrap 2.x，将点击处理程序添加到列表项而不是链接：

$('.nav').click('li', function() {
    $('.navbar-collapse').collapse('hide');
}); 

Answer 2

我解决了一个类似的问题，即导航栏主页上的选项关联了另一个事件。所以，当我点击它时，所有的导航栏都会闪烁。因此，我在导航栏上添加了一个 id 并添加了一个 jquery 块，如下所示：

HTML

<nav id="barraMenu" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" aria-label="Toggle navigation"
                        data-target="#menuHorizontal" aria-expanded="false" aria-controls="menuHorizontal">
                    <span class="sr-only"> Toggle navigation </span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

...

</nav>

JS - 我添加了 if 条件，因为它使我的汉堡菜单在我所拥有的@media 情况下工作。

$("#barraMenu").click(function(e) {
   if (window.innerWidth > 753) {
      e.preventBubble();
      e.stopPropagation();
   }
});

我希望它可以帮助某人。谢谢。