jquery - 多个 Bootstrap 导航栏的动画汉堡图标

Question

我从 1 个导航栏开始，单击它会将汉堡图标动画化为“x”。我用另一个汉堡添加了一个额外的导航栏，但现在动画不再适用于任何一个。为了在一个页面上有多个导航栏，您需要将数据目标从#navbar 更改为其他内容，但是一旦我这样做，我就失去了我的动画。有什么想法吗？

<nav class="navbar white navbar-default">
      <div class="logo"></div>
        <div class="container-fluid">
         <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".mainnav" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar top-bar"></span>
          <span class="icon-bar middle-bar"></span>
          <span class="icon-bar bottom-bar"></span>
        </button>
          </div>
          <div id="navbar" class="navbar-collapse collapse mainnav">
            <ul class="nav navbar-nav">
              <li><a class="scroller" href="#proj-head">projects</a></li>
              <li><a href="#section3">studio</a></li>
              <li><a href="#section4">press</a></li>
              <li><a href="#section6">Contact</a></li>
              <li><a href="https://www.linkedin.com/profile/view?id=192958931"><i class="fa fa-linkedin"></i></a></li>          
              <li><a href="http://instagram.com/STUDIOSC_NYC"><i class="fa fa-instagram"></i></a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>

为了节省空间，第二个导航与“.secondarynav”作为数据目标相同。 CSS 是:

.navbar-toggle .icon-bar {
  width: 22px;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
}
.navbar-default .navbar-toggle {position:relative; padding-top:20px; z-index:100}
.navbar-toggle .top-bar {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform-origin: 10% 10%;
  -webkit-transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
  opacity: 0;
}
.navbar-toggle .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
  -webkit-transform: rotate(-45deg);
  -webkit-transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
  transform: rotate(0);
  -webkit-transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
  opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
  transform: rotate(0);
  -webkit-transform: rotate(0);
}

Answer 1

我能够通过将按钮的“数据目标”更改为导航 ID 的目标而不是类“.mainnav”来使其正常工作。

data-target="#navbar"

https://jsfiddle.net/partypete25/vc3sw8r5/3/

一旦我这样做了，它就奏效了。所以我将它重命名为 navbar-1，并复制它以创建第二个，将其命名为 navbar-2。