Bootstrap - 下拉菜单不再在线工作，但在 VS Code Live Server 中完美运行

Posted 2023-03-21

【中文标题】Bootstrap - 下拉菜单不再在线工作，但在 VS Code Live Server 中完美运行

【英文标题】：Bootstrap - drop downs no longer working online but works perfect in VS Code Live Server

【发布时间】：2022-01-20 17:37:01

【问题描述】：

我将我的网站上传到了一个新的主机，即加拿大网络主机。我从以前的主机 Hostpapa.ca 下载了所有文件，然后上传到新主机，但现在下拉菜单不起作用。

www.FeaterX.com

但是，在 VS-Code Live Server 中，一切正常。

这是我为导航栏所做的编码

<!--      Featerx nav bar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-transparent no-gutters pb-5 sticky-top trn">
  <a class="navbar-brand" href="index.html">            
            <div class="header-title">
              <h4 class="text-center text-light">FeaterX International</h4>
              <h6 class="text-center text-light">- est. 1994 -</h6>
            </div></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse ml-5" id="navbarNavDropdown">
    <ul class="navbar-nav">
        <li class="nav-item active">
            <a class="nav-link text-warning" href="http://thekingslandingresort.ca/">
            <h5 class="text-center">The King's Landing Luxury RV Resort</h5>
            </a>
        </li>
    <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle text-warning" href="#" id="navbarDropdownMenuLinkConsulting" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <h5 class="text-center"> FX<em>i</em>-Consulting</h5>
            </a>
        <div class="dropdown-menu bg-light" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item text-dark" href="FXi_Consulting.html">
                <h4 class="text-left">FX<em>i</em>-Consulting</h4>
                </a>
                <a class="dropdown-item text-dark" href="FXi_JobSite_Solutions.html">
                <h4 class="text-left">FX<em>i</em>-JobSite Solutions</h4>
                </a>
                <a class="dropdown-item text-dark" href="FXi_Learning.html">
                <h4 class="text-left">FX<em>i</em>-Learning</h4>
                </a>
        </div>
    </li>
    

    
    <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle text-warning" href="#" id="navbarDropdownMenuLink2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <h5 class="text-center"> Great Reads</h5>
                    </a>
        <div class="dropdown-menu bg-light" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item text-dark" href="FeaterX_Articles_Books_Blogs_etc.html">
                <h4 class="text-left">Articles</h4>
                </a>
                <a class="dropdown-item text-dark" href="FeaterX_Books.html">
                <h4 class="text-left">Books</h4>
                </a>
                <!-- <a class="dropdown-item text-dark" href="FeaterX_Articles_Books_Blogs_etc.html">
                <h4 class="text-left">Social Media</h4>
                </a> -->
        </div>
    </li>
    </ul>
    </div>
    <div class="row no-gutters navbutton d-none d-lg-inline">
    <div class="col nav-item">
        <a class="nav-link" href="Contact.html">         <button type="button" class="btn btn-danger btn-sm">
             Contact
         </button>
        </a>
        <a class="LinkedIn" href="https://www.linkedin.com/in/roy-cooper-5b9b3988/">
            <img src="images/LI-China-Logo.png"  class="img-fluid">
        </a>
    </div>
    </div>
</nav>

关于如何解决此问题的任何想法？

【问题讨论】：

你在看你的浏览器控制台或网络标签吗？这是调试此类案例的基础。

原谅我，但我是一个老人，这对我来说是新的，自学编写代码和我的两个网站，不知道你的意思。我在 chrome、microsoft edge 和我的 android Huawei P30 Pro 手机上在线打开了网站，问题是一样的。手机上的导航按钮也没有响应....顺便说一句，我喜欢你的头像，我是在 MAD 杂志上长大的

【参考方案1】：

您的脚本未加载。他们失踪了。重新检查他们的路径：

---

在您的第一条评论之后，我再次测试，现在协议HTTP/3 已更改为HTTP/2，但仍然缺少文件。可能是权限问题？

这是新的浏览器控制台结果：

【讨论】：

好吧，不知道为什么，我加载它们的内容相同，并没有改变任何东西。我从他们那里下载了我的旧主机 - Hostpapa 到我的笔记本电脑，然后将它们上传到我的新主机“Web Host Canada”。

c-panel文件管理器中的文件和HostPapa一样

已解决......哦，我是个白痴......我把“jss”而不是“js”放在Java的文件名......非常感谢....我确实说过我老了对吧？

您可以自行验证。如果使用 firefox 或 chrome，只需右键单击悬停页面并选择“检查”。

太棒了 :-) 很高兴为您提供帮助。我现在看到它运行良好。