Question

我试图将导航栏外包到我可以读入/包含在我项目的所有其他页面中的文件中。我看到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>

这里有帮助下拉列表的JavaScript：

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

当我将导航栏代码放入单独的文件中时试试<?php include("nav.php");?>，下拉列表部分无效。有什么想法吗？

编辑：

我也尝试过js并遇到同样的问题，它加载得很好但没有下拉列表：

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

使用它或PHP的方式工作会很棒。

Answer 1

我得到了它的工作！在index.html中，我使用了以下导航栏最初的位置：

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

然后（这就是诀窍），我在nav.html中重新包含了js文件：

<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>
<script src="assets/js/jquery.dropotron.min.js"></script>
<script src="assets/js/main.js"></script>

所以我在`index.html

的末尾都有js文件

HTML - 带有下拉菜单的跨页面导航栏（包括PHP）

1 个答案: