切换合作并关闭

Question

我有一个适用于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

如果您的意思是汉堡包，它会按预期运作。

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

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;