javascript - 切换折叠和关闭

Question

我有一个适用于 hamburger 类的开关；但是我不知道如何做到这一点，以便当我点击 hamburger 类的子级时，它会切换 hamburger 类。

<div class="navbar-toggle pull-left" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <div class="hamburger" id="hamburger-6">
              <span class="line"></span>
              <span class="line"></span>
              <span class="line"></span>
            </div>
          </div>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a class="page-scroll" href="#a">a</a></li>
                <li><a class="page-scroll" href="#b">b</a></li>
            </ul>
        </div>



$(document).ready(function(){
  $(".hamburger").click(function(){
    $(this).toggleClass("is-active");
  });
});

Answer 1

如果您指的是汉堡包，它会按预期工作。

编辑:单击菜单元素时菜单关闭

$(document).ready(function() {
  $("body").on("click", ".hamburger", function() {
    $(this).toggleClass("is-active");
  });
  
  $("body").on("click", "li", function() {
    $(".hamburger").removeClass("is-active").trigger("click");
  });
});

.navbar-toggle {
  width: 100%;
}

.hamburger {
  width: 50px;
  height: 50px;
  color: black;
  cursor: pointer;
}
.line {
  display: block;
  height: 5px;
  width: 100%;
  background: black;
  border-radius: 9px;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="navbar-toggle pull-left" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  <div class="hamburger" id="hamburger-6">
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
  </div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li><a class="page-scroll" href="#a">a</a></li>
    <li><a class="page-scroll" href="#b">b</a></li>
  </ul>
</div>