Question

我想建立一个基本的网站。 Β下面，我在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>

Answer 1

您正在HTML中包含HTML，但不支持此功能。在将nav.html包含到home.php中时，您要删除标记主体，html和完全头部。

<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的“结果”，而是代码。

使用PHP include时，toglegle按钮不起作用

1 个答案: