Javascript 当使用PHP include时，图标按钮不会'；行不通_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 当使用PHP include时，图标按钮不会'；行不通

javascript jquery html css twitter-bootstrap

Javascript 当使用PHP include时，图标按钮不会'；行不通,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我想建立一个基本的网站。下面我有一个nav.html文档，我在其中设计了一个基本的下拉菜单。当我用浏览器打开nav.html时，切换按钮工作正常，当我点击它时，下拉菜单折叠并显示当我再次单击它时，下拉列表消失。当我在home.php文件中包含nav.html时，问题就出现了。当我单击切换按钮时，下拉菜单将折叠，但当我再次单击时，下拉菜单将保持打开且不会消失 <html> <head> <meta name="viewport" conte

我想建立一个基本的网站。下面我有一个nav.html文档，我在其中设计了一个基本的下拉菜单。当我用浏览器打开nav.html时，切换按钮工作正常，当我点击它时，下拉菜单折叠并显示当我再次单击它时，下拉列表消失。当我在home.php文件中包含nav.html时，问题就出现了。当我单击切换按钮时，下拉菜单将折叠，但当我再次单击时，下拉菜单将保持打开且不会消失

<html>

    <head>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <meta charset="utf-8">

    </style>

    </head>

<body>

    <nav class="navbar navbar-light bg-lignt">

         <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
<span class="navbar-toggler-icon my-toggler"></span>

        </button>
        <div class="navbar-collapse collapse" id="collapsingNavbar2">


        <ul class="navbar-nav mx-auto">

            <li class="nav-item active">

                <a class="nav-link" href="#">Link</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link</a>

            </li>

        </ul>

    </div>

</nav>

</body>

</html>

home.php

<html>

<title>Home</title>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<meta charset="utf-8">

<style>

</style>

</head>


<body>

<?php include('./nav.html'); ?>

</body>

</html>

家

您正在HTML中包含HTML，这是不受支持的。在home.php中包含nav.html时，需要删除标记body、html和completly head

<nav class="navbar navbar-light bg-lignt">

         <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
<span class="navbar-toggler-icon my-toggler"></span>

        </button>
        <div class="navbar-collapse collapse" id="collapsingNavbar2">


        <ul class="navbar-nav mx-auto">

            <li class="nav-item active">

                <a class="nav-link" href="#">Link</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link</a>

            </li>

        </ul>

    </div>

</nav>

PHP和HTML是完全不同的语言。使用PHP可以生成HTML内容。您没有包含nav.html的“结果”，而是包含代码