導航欄折疊按鈕不會展開
[英]Navbar Collapse button wont expand
問題描述
因此，我剛開始在我的投資組合頁面上工作（第二個項目，請保持溫柔），一切進展順利，直到我嘗試使用折疊按鈕來顯示指向網頁其他部分的鏈接。
這是有問題的代碼：
<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>
然后這是我正在使用的自定義CSS：
.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; }
主要是我的問題是要使按鈕展開並實際顯示列表中的項目，但是目前，它所做的只是通過增加亮度來響應單擊。
任何幫助表示贊賞！ 先感謝您！
1 個解決方案
解決方案1
0 2016-08-26 20:00:12
我有一個類似的問題。 查看了html幾次，並確定它是正確的。 然后，我開始嘗試使用jquery和bootstrap javascript的順序。
最初，我在jquery.min.js之前加載了bootstrap.min.js。 在這種狀態下，單擊菜單圖標時菜單不會展開。
然后，我更改了順序，使bootstrap.min.js緊隨jquery.min.js之后，從而解決了問題。 我對javascript的了解不足，無法解釋為什么這會導致問題（或解決問題），但這對我有用。
附加信息：
這兩個腳本都位於頁面底部，在標記之前。 這兩個腳本都托管在CDN上，而不是本地托管。
如果您確定自己的代碼正確無誤，請嘗試一下。
如果這不能解決您的問題，請按照下列步驟操作：
1- 在此處發布您的Plunker或Fiddle
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>
響應式導航欄不會崩潰
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.