Javascript HTML-跨页面导航栏（包含PHP）和下拉菜单？_Javascript_Php_Jquery_Html_Drop Down Menu

Javascript HTML-跨页面导航栏（包含PHP）和下拉菜单？

javascript php jquery html drop-down-menu

Javascript HTML-跨页面导航栏（包含PHP）和下拉菜单？,javascript,php,jquery,html,drop-down-menu,Javascript,Php,Jquery,Html,Drop Down Menu,我正试图将我的导航栏外包到一个文件中，我可以在我的项目的所有其他页面中读取/包含该文件。我看到PHP的include可以工作，但这样做会使我的整个菜单保持静态，并丢失下拉菜单这是我的简化页面，带有带有下拉菜单的导航栏： <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-

我正试图将我的导航栏外包到一个文件中，我可以在我的项目的所有其他页面中读取/包含该文件。我看到PHP的

include

可以工作，但这样做会使我的整个菜单保持静态，并丢失下拉菜单

这是我的简化页面，带有带有下拉菜单的导航栏：

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="assets/css/main.css" />
    </head>
    <body class="homepage">
        <div id="page-wrapper">

            <!-- Header -->
                <div id="header">

                    <!-- Nav -->
                        <nav id="nav">
                            <ul>
                                <li><a href="index.html">Home</a></li>
                                <li>
                                    <a href="#">Dropdown</a>
                                    <ul>
                                        <li>
                                            <a href="#">1 &rarr;</a>
                                            <ul>
                                                <li><a href="#">thing 1</a></li>
                                                <li><a href="#">thing 2</a></li>
                                                <li><a href="#">thing 3</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="#">not dropdown</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </nav>

                </div>

        </div>

        <!-- Scripts -->
            <script src="assets/js/jquery.dropotron.min.js"></script>

    </body>
</html>

当我将导航条形码放入一个单独的文件&try

时，下拉部分不起作用。有什么想法吗

编辑：

我也用js尝试过，但也遇到了同样的问题，即加载良好，但缺少下拉列表：

    $('#nav > ul').dropotron({
        mode: 'fade',
        speed: 350,
        noOpenerFade: true,
        alignment: 'center'
    });

<nav id="nav">
   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
       <script>
            $(function(){
            $("#nav").load("nav.html");
            });
       </script> 
</nav>


$（函数（）{
$（“#nav”）.load（“nav.html”）；
});

让它或PHP的方式工作将是伟大的

我成功了！在

index.html

中，我在导航栏最初的位置使用了以下内容：

<nav id="nav">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
     $(function(){
    $("#nav").load("nav.html");
    });
</script> 
</nav>

因此，我的'index.html

末尾都有js文件，我让它工作了！在

index.html

中，我在导航栏最初的位置使用了以下内容：

<nav id="nav">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
     $(function(){
    $("#nav").load("nav.html");
    });
</script> 
</nav>

因此，我的'index.html

末尾都有js文件，您是否也在每个页面的下拉列表中包含javascript？您的代码是否包含document.ready函数？您的web服务器上是否运行PHP？您在浏览器控制台或服务器的错误日志中发现了哪些错误？首先，我将使用require而不是include。检查差异。然后发布您尝试过的内容，我们将进行查看。目前，您要求我们为您编写代码。@Conor是的，我将其包含在每个页面的底部。您是否也将javascript包含在每个页面的下拉列表中？您的代码是否包含document.ready函数？您的web服务器上是否运行PHP？您在浏览器控制台或服务器的错误日志中发现了哪些错误？首先，我将使用require而不是include。检查差异。然后发布您尝试过的内容，我们将进行查看。目前，您要求我们为您编写代码。@Conor是的，我会在每页的底部添加代码