多个 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。

Answer 2

为您修复并使其更易于管理:)

HTML：

<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="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-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>

CSS：

.navbar-toggle .icon-bar:nth-of-type(2) {
      top: 1px;
}

.navbar-toggle .icon-bar:nth-of-type(3) {
    top: 2px;
}

.navbar-toggle .icon-bar {
      position: relative;
      transition: all 500ms ease-in-out;
}

.navbar-toggle.active .icon-bar:nth-of-type(1) {
      top: 6px;
      transform: rotate(45deg);
}

.navbar-toggle.active .icon-bar:nth-of-type(2) {
      background-color: transparent;
}

.navbar-toggle.active .icon-bar:nth-of-type(3) {
      top: -6px;
      transform: rotate(-45deg);
}

JS：

$(document).ready(function () {
              $(".navbar-toggle").on("click", function () {
                    $(this).toggleClass("active");
              });
        });

CODEPEN DEMO