2015-07-21 31 views
-4

問題是,當下拉菜單被點擊時,沒有菜單下來。在使用PHP包含之前,菜單按照它應該的那樣工作。下拉菜單工程HTML PHP包括的問題

首先,每個.html頁面都包含自己的導航條形碼。不過,我最近發現了PHP的「包含」功能。我將導航欄的代碼部分複製到navigation.php,並在index.php(原始的.html頁面)中使用了PHP include語句。我刪除了大量不必要的代碼:

<?php include("includes/navigation.php"); ?> 

這是我的index.php文件中唯一代碼行。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<title>Invest for Hope - Donations</title> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
<link rel="icon" href="/assets/favicon.ico"> 
<link rel="apple-touch-icon" href="/assets/apple-touch-icon.png"> 
<link rel="apple-touch-icon" sizes="72x72" href="/assets/apple-touch-icon-72x72.png"> 
<link rel="apple-touch-icon" sizes="114x114" href="/assets/apple-touch-icon-114x114.png"> 
<link rel="shortcut icon" href="favicon.ico"> 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"> 

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'> 
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'> 
<style type="text/css">html,body{height:100%;}.container-full{margin:0 auto;width:100%;min-height:100%;background-color:#110022;color:#eee;overflow:hidden;}.container-full a{color:#efefef;text-decoration:none;}.v-center{margin-top:7%;}[class^="cus-"],[class*=" cus-"]{display:inline-block;width:17px;height:16px;*margin-right:.3em;line-height:14px;vertical-align:text-top;background-image:url("/assets/social-icons-nav.png");background-position:14px 14px;background-repeat:no-repeat;opacity:0.5;}[class^="cus-"]:last-child,[class*=" cus-"]:last-child{*margin-left:0;}[class^="cus-"]:hover,[class*=" cus-"]:hover{opacity:1;}.cus-social-email{background-position:0 0;width:24px;height:24px;}.cus-social-facebook{background-position:-29px 0;width:24px;height:24px;}.cus-social-twitter{background-position:-58px 0;width:24px;height:24px;}.cus-social-youtube{background-position:-87px 0;width:24px;height:24px;}.btn-xlmain{width:310px;height:18px%;position:absolute;text-align:center;left:0;right:0;margin-left:auto;margin-right:auto;z-index:51;margin-top:-50px;}</style> 
</head> 
<body> 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> About<b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li> 
        <a href="mission.html"> About</a> 
       </li> 
       <li> 
        <a href="team.html"> Team</a> 
       </li> 
      </ul> 
     </li> 
     <li> 
     </ul> 
    </div> 
</nav> 

這是從navigation.php文件中刪除大部分代碼後的所有代碼。現在,它只包含下拉菜單和CSS來格式化頁面。

如果您想通過下拉菜單查看實際問題,請轉至www.investforhope.org。主頁顯示了我所顯示的確切代碼。

+0

所以'那裏index.php'是包括'包括/ navigation.php' – RiggsFolly

+1

看來你有一些麻煩與HTML註釋<! - 註釋代碼 - > –

+0

你爲什麼要使用當你使用bootstarp時,你自己的CSS –

回答

0

看:

進行下載或使用CDN做一個快速測試,添加下面一行在你的HTML,內<header>。您已通過省略用於刪除.modal-dialog的結束註釋標記註釋掉了所有JS包含的內容。 通過在.modal-dialog的結束標記之後添加關閉註釋標記-->來撤消該錯誤,它將起作用。

這是你必須

<!-- 
    <div class="modal-dialog"> 
    ... 
    <script ... > 
    ... 
    </body> 
</html> 

沒有近距離註釋標記(儘管瀏覽器可以呈現一個)。

這是你應該有的,其中</div>是匹配的結束標籤。

<!-- 
    <div class="modal-dialog"> 
    ... 
    </div> 
--> 
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> 
etc etc 

ALSO此行是沒有幫助的。

<script>"js/bootstrap.js"</script> 
+0

我實際上在navigation.php中包含了所有註釋掉的代碼。感謝您的幫助!欣賞它! – JoshTheLiuser

0

您需要在頁面中添加JQuery和Bootstrap JavaScript。在你給的鏈接的源

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script> 
+0

看看源代碼。 OP認爲他們有 – Popnoodles

+0

@Popnoodles我已經在他的網頁上測試過添加這兩個JS,它的工作原理。我確信這就是原因 – Qianlong

+0

其實這是一個很好的觀點,他只包含了CSS並且沒有其他的用於引導 – RiggsFolly