Question

（Bootstrap 3）如果我做了

http://dev.artsicleprojects.com/navbar.php

下拉功能，但是如果我这样做

http://dev.artsicleprojects.com/index.php

下拉菜单什么都不做。我的index.php代码就在这里

<html>
<head>
    <title>Artsicle Projects Dev</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="bootstrap/bootstrap.min.js"></script>
    <script src="script.js"></script>
    <?php include 'navbar.php'?>
</body>
</html>

修改

navbar.php代码：

    <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="script.js"></script>
<div class="jumbotron text-center">
    <h1>Artsicle Projects</h1>
</div>
<div class="dropdown" style="position: absolute; left: 30%">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Games

        <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="catclicker/index.php">Cat Clicker</a></li>
        <li><a href="#">Exit The Room</a></li>
        <li><a href="comingsoon/index.html">Coming Soon!</h5></a></li>
    </ul>
</div>
<div class="dropdown" style="position: absolute; left: 60%">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Extra

        <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="#">Nothing</a></li>
        <li><a href="comingsoon/index.html">Coming Soon!</h5></a></li>
    </ul>
</div>

提前致谢！

Answer 1

您index.php中有多个<head>，<body>，<script>等，您的标记无效。这是因为navbar.php是完整的（独立版） HTML页面，您将该完整页面包含在另一个页面中。查看每个页面的来源，您就会看到发生了什么。

从navbar.php内的<body>移除<head>内的所有内容。也就是说，仅包含导航栏的标记，而不是<body>中的<script>，navbar.php，StandardOutput=journal+console等。

Answer 2

这是正确的顺序。将标题部分从navbar.php移动到标题：

<html>
<head>
    <title>Artsicle Projects Dev</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="http://dev.artsicleprojects.com/bootstrap/bootstrap.css"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="http://dev.artsicleprojects.com/bootstrap/bootstrap.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="http://dev.artsicleprojects.com/bootstrap/bootstrap.min.js"></script>
</head>

<body>
    <div class="jumbotron text-center">
        <h1>Artsicle Projects</h1>
    </div>
    <div class="dropdown" style="position: absolute; left: 30%">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Games

            <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="catclicker/index.php">Cat Clicker</a></li>
            <li><a href="#">Exit The Room</a></li>
            <li><a href="comingsoon/index.html">Coming Soon!</h5></a></li>
        </ul>
    </div>
    <div class="dropdown" style="position: absolute; left: 60%">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Extra

            <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">Nothing</a></li>
            <li><a href="comingsoon/index.html">Coming Soon!</h5></a></li>
        </ul>
    </div></body>
</html>

PHP包括不使用bootstrap下拉列表

2 个答案: