切換collapese並關閉

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

如果您的意思是漢堡包，它會按預期工作。

編輯：當點擊菜單元素

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