2016-08-26 19 views
0

私は自分のポートフォリオページ(2番目のプロジェクトは優しいので)に取り掛かりました。折りたたみボタンを使用して私のウェブページの他の部分へのリンクを表示するまですべてがスムーズに進んでいました。そして、ここで私が使用しているカスタムCSSれNavbar折りたたみボタンは展開しません

<body> 
<div class="row"> 
<div class="col-md-12"> 
    <div class="container"> 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
     <a href="#" class="navbar-brand Logo" id="Logo"> 
     StruckCroissant 
    </a> 
     <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navHeaderCollapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> 
     <div class="collapse navbar-collapse navHeaderCollapse"> 
     <ul class="nav navbar-nav navbar-right" id="Nav-List"> 
      <li><a href="#">About Me</a></li> 
      <li><a href="#">Projects</a></li> 
      <li><a href="#">Contact Me</a></li> 
     </ul> 
     </div> 
    </nav> 
    </div> 
</div> 

そして:

.Logo{ 
 
    font-size:20px; 
 
    color:white; 
 
    font-family:Monospace; 
 
    -webkit-transition:all ease 0.2s; 
 
    -moz-transition:all ease 0.2s; 
 
    -o-transition:all ease 0.2s; 
 
    transition:all ease 0.2s; 
 
} 
 

 
#Logo:hover{ 
 
    font-size:20px; 
 
    color:green; 
 
    font-family:Monospace; 
 
    background-color:white; 
 
    border-color:white 
 
} 
 

 
#Nav-List{ 
 
    padding-right:30px; 
 
}

主に私の問題ここで

は、問題のコードです尻を得ているnを展開してリスト内の項目を実際に表示しますが、現在のところ、クリックだけでより明るくなります。

ご協力いただきましてありがとうございます。前もって感謝します!

答えて

0

私にも同様の問題がありました。 htmlを数回見て、それが正しいと確信していました。その後jqueryとbootstrap javascriptの順序で遊び始めました。

私は元々bootstrap.min.jsをjquery.min.jsからロードしていました。この状態では、メニューアイコンをクリックしてもメニューは展開されません。

次に、bootstrap.min.jsがjquery.min.jsの後に来るように順序を変更しました。これで問題は解決しました。私はなぜこれが問題を引き起こしたのか(またはそれを修正したのか)を説明するために、javascriptについて十分に知りませんが、それが私のために働いたのです。

追加情報:

どちらのスクリプトがちょうどタグの前に、ページの下部に位置しています。両方のスクリプトは、ローカルにホストされていないCDNでホストされています。

あなたのコードが正しいと確信しているなら、これを試してみてください。これで問題が解決しない場合は

、次の手順に従います

1 - ここポストあなたのPlunkerやフィドルを
2からあなた自身ではなく、あなたのナビゲーションバーの崩壊サンプルのため、このスニペットを使用してみてくださいスタイル

<div class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav navbar-right"> 
       <button id="loginbutton" type="button" class="btn btn-primary narbar-btn"><i class="glyphicon glyphicon-log-in"></i>Login</button> 
       <button type="button" class="btn btn-success navbar-btn"><i class="glyphicon glyphicon-link"></i><a href="./register.jsp">Create account</a></button> 
       </ul> 
</div> 
関連する問題