когда используется PHP include, кнопка toogle не работает - PullRequest
0 голосов
/ 14 октября 2019

Я хотел бы создать базовый сайт. Ниже у меня есть документ nav.html, где я разработал основное выпадающее меню. Когда я открываю nav.html с помощью браузера, кнопка переключения работает нормально, когда я нажимаю на нее, раскрывающееся меню сворачивается, и когда я нажимаю на нее снова, раскрывающееся меню исчезает. Проблема возникает, когда я включаю nav.html в файл home.php. Когда я нажимаю на кнопку переключения, раскрывающееся меню сворачивается, но при повторном нажатии раскрывающееся меню остается открытым и не исчезает.

<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>

1 Ответ

1 голос
/ 14 октября 2019

Вы включаете HTML в HTML, и это не поддерживается. Поскольку вы включаете nav.html в home.php, вы хотите удалить теги body, 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, а код.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...