CSS 和 Javascript 在我的本地主机 PHP 文件夹中不起作用答案

【问题标题】：CSS and Javascript aren't working inside my localhost PHP folderCSS 和 Javascript 在我的本地主机 PHP 文件夹中不起作用
【发布时间】：2017-06-02 21:53:00
【问题描述】：

您好，我正在尝试在 PHP 文件中使用 javascript 实现我最初用 html 和 css 设计的页面。 CSS 和 javascript 似乎没有任何问题，因为它们在原始 html 文件中工作正常。当我将代码放到一个 php 文件中时，它原本可以正常工作。现在侧边栏不会折叠，按钮似乎恢复到原来的默认样式。当我通过 localhost 打开 html 文件时会发生完全相同的事情，尽管如果我在浏览器中打开它可以找到它。我正在尝试回溯并找出导致此问题的更改。我是 PHP 新手，因此不胜感激。

我的 PHP 代码：

<?php
include('database.php');
session_start();

if(!isset($_SESSION['id']) && !isset($_SESSION['type'])){
header('location: Index.php');
}

?>

<html>
<head>
<title>Yasalade</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
integrity="sha384-
1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" 
crossorigin="anonymous">
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-
theme.min.css" integrity="sha384-
fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" 
crossorigin="anonymous">
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
integrity="sha384-
0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" 
crossorigin="anonymous"></script>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<link rel="stylesheet" href="Style.css">
<script 
src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">
</script>

</head>

<body>

<!-- Sidebar -->
   <div id="wrapper">
    <div class="overlay"></div>

    <!-- Sidebar -->
    <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" 
role="navigation">
        <ul class="nav sidebar-nav">
            <li class="sidebar-brand">
                <a href="Main.html">
                   Eventses
                </a>
            </li>
            <li>
                <a href="Main.html"><span class="glyphicon glyphicon-th-list">Main</span></a>
            </li>
            <li>
                <a href="Profile.html"><span class="glyphicon glyphicon-user">Profile</span></a>
            </li>
            <li>
                <a href="Events.html"><span class="glyphicon glyphicon-glass">Events</span></a>
            </li>

            <li>
                <a href="Settings.html"><span class="glyphicon glyphicon-cog">Settings</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-envelope">Messages</span></a>
            </li>
            <li>
                <a href="#">Logout</a>
            </li>
        </ul>
    </nav>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">
        <button type="button" class="hamburger is-closed" data-toggle="offcanvas">
            <span class="hamb-top"></span>
            <span class="hamb-middle"></span>
            <span class="hamb-bottom"></span>
        </button>

    </div>
    <!-- /#page-content-wrapper -->

</div>
<!-- /#wrapper -->

 <!-- Main body -->
<div class="container" align="right">

        <div class="col-sm-10">
            <div class="bs-calltoaction bs-calltoaction-primary">
                <div class="row">
                    <div class="col-md-9 cta-contents">
                        <h2 class="cta-title">Event Title</h2>
                        <center><img src="default.png" alt="pic"></center>
                        <div class="cta-desc">
                        <p3>Insert info about event</p3>

                        </div>
                    </div>
                    <a href=Analysis.html><button type="button" class="btn btn-primary btn-sm">Analyse</button></a>
                 </div>
            </div>

            <div class="bs-calltoaction bs-calltoaction-primary">
                <div class="row">
                    <div class="col-md-9 cta-contents">
                        <h2 class="cta-title">Event Title</h2>
                        <center><img src="default.png" alt="pic"></center>
                        <div class="cta-desc">
                        <p3>Insert info about events</p3>
                        </div>
                    </div>
                   <a href=Analysis.html><button type="button" class="btn btn-primary btn-sm">Analyse</button></a>
                 </div>
            </div>

        </div>
    </div>


</body>

</html>

<script>
$(document).ready(function () {
var trigger = $('.hamburger'),
  overlay = $('.overlay'),
 isClosed = false;

trigger.click(function () {
  hamburger_cross();      
});

function hamburger_cross() {

  if (isClosed == true) {          
    overlay.hide();
    trigger.removeClass('is-open');
    trigger.addClass('is-closed');
    isClosed = false;
  } else {   
    overlay.show();
    trigger.removeClass('is-closed');
    trigger.addClass('is-open');
    isClosed = true;
  }
}

$('[data-toggle="offcanvas"]').click(function () {
    $('#wrapper').toggleClass('toggled');
  });  
});

</script>

【问题讨论】：

jQuery 应该包含在之前 Bootstrap JS。 Bootstrap JS 的两个版本有什么用？你有3.3.6 和3.1.1。
您在 localhost 系统上可以访问互联网吗？ @hungerstar 还说您应该在 Bootsrap js 之前包含 jquery。在您页面上的 chrome 浏览器上按 F12 并查看 consol 选项卡上是否出现任何错误。
为什么你包含boostrap css和js这么多次？如果您没有连接到网络，这些脚本将不会加载
Jquery 1.x 不适用于 boostrap 3.x
好的，谢谢你们。我更新了 JQuery 并取出了旧的引导程序，它可以工作。我一定是从几个月前的代码中复制了 bootstrap 3.1.1。

标签： javascript php jquery html css

【解决方案1】：

正如其他用户指出的那样，引导程序和 JQuery 不是最新版本。现在可以正常使用了。

【讨论】：