ブートストラップ「折りたたみ」リンク

このハンバーガーアイコンをブートストラップメニューに追加しようとしています。だから私がハンバーガーをクリックすると、それを再びクリックするとテキストが拡大して崩壊するはずです。正常なリンクで正常に動作しますが、クラス "menu-trigger"を追加すると動作を停止します。私はできることをすべて試しましたが、今は詰まっています。ブートストラップ「折りたたみ」リンク

HTML：

<body> 
<section> 
<a class="menu-trigger" id="menu10" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 
<span></span> 
<span></span> 
<span></span> 
</a> 
<a id="menu10" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 
link works fine 
<span></span> 
<span></span> 
<span></span> 
</a> 
</section> 

<section> 
<div class="collapse" id="collapseExample"> 
<div class="card card-block"> 
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
</div> 
</div> 
</section> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 

<script> 
$(function(){ 
$('.menu-trigger').on('click', function() { 
$(this).toggleClass('active'); 
return false; 
}); 
}); 
</script> 
</body>

CSS：

.menu-trigger, 
.menu-trigger span { 
    display: inline-block; 
    transition: all .4s; 
    box-sizing: border-box; 
} 
.menu-trigger { 
    position: relative; 
    width: 40px; 
    height: 32px; 
} 
.menu-trigger span { 
    position: absolute; 
    left: 0; 
    width: 100%; 
    height: 4px; 
    background-color: #333; 
    border-radius: 4px; 
} 
.menu-trigger span:nth-of-type(1) { 
    top: 0; 
} 
.menu-trigger span:nth-of-type(2) { 
    top: 13px; 
} 
.menu-trigger span:nth-of-type(3) { 
    bottom: 0; 
} 
#menu10:not(.active):hover span:nth-of-type(2) { 
    width: 70%; 
} 
#menu10:not(.active):hover span:nth-of-type(3) { 
    width: 35%; 
} 
#menu10.active span:nth-of-type(1) { 
    -webkit-transform: translateY(13px) rotate(-45deg); 
    transform: translateY(13px) rotate(-45deg); 
} 
#menu10.active span:nth-of-type(2) { 
    opacity: 0; 
} 
#menu10.active span:nth-of-type(3) { 
    -webkit-transform: translateY(-15px) rotate(45deg); 
    transform: translateY(-15px) rotate(45deg); 
}

感謝。

出典

2016-09-12 luke