navbarトグルアニメーションが動作しない

Question

こんにちは私はこのコードをクリックしてクリックしたときにトグルをアニメートします。私はそれが言うようにコードを正確にコピーしましたが、アニメーションがありません何が間違っていますか？私は、外部のPHPファイルとしてロードされたCSSなど

そのを追加したが、コードは次のとおりです。

<nav class = 'navbar navbar-default'> 
<div class = 'navbar-header'> 
<button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#example-navbar-collapse' 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><a class = 'navbar-brand' href = '#'>SITENAME</a></div> 
<div class = 'collapse navbar-collapse' id = 'example-navbar-collapse'> 
    <ul class='nav navbar-nav navbar-nav'> 
     <li class='non-active'><a href='#'>About</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-nav'> 
     <li class='non-active'><a href='#'>Get bids</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-nav'> 
     <li class='non-active'><a href='#'>Register company</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-nav'> 
     <li class='non-active'><a href='#'>Help</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-nav'> 
     <li class='non-active'><a href='#'>Contact</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-right'> 
     <li><a href='#'><span class='glyphicon glyphicon-user'></span> Login</a></li> 
    </ul> 
</div> 
</nav>` 

とCSSは次のとおりです。 -

.navbar-toggle { 
    border: none; 
    background: transparent !important; 

    &:hover { 
    background: transparent !important; 
    } 

    .icon-bar { 
    width: 22px; 
    transition: all 0.2s; 
    } 
    .top-bar { 
    transform: rotate(45deg); 
    transform-origin: 10% 10%; 
    } 
    .middle-bar { 
    opacity: 0; 
    } 
    .bottom-bar { 
    transform: rotate(-45deg); 
    transform-origin: 10% 90%; 
    } 
} 

.navbar-toggle.collapsed { 
    .top-bar { 
    transform: rotate(0); 
    } 
    .middle-bar { 
    opacity: 1; 
    } 
    .bottom-bar { 
    transform: rotate(0); 
    } 
} 

確かにそのシンプルかつイムだけで行方不明何かばかげた！ thankx

Answer 1

あなたはJavascriptが不足しています。 .collapsedクラスの切り替えは、HTML + CSSだけでは実行できません。