导航栏上的问题 - 单击时切换栏不显示页面答案

【问题标题】：Issues on Navigation bar- toggle bar when clicked doesn't show the pages导航栏上的问题 - 单击时切换栏不显示页面
【发布时间】：2020-11-11 08:03:41
【问题描述】：

我已按照导航栏上的说明进行操作，但是当单击切换按钮时，它不会显示页面。可能是什么问题？我正在使用 Windows 10。下面是 HTML 代码。

  <nav class="navbar navbar-dark navbar-expand-sm  fixed-top ">
        <div class="container">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand mr-auto" href="#">Ristorante con Fusion</a>
            <div class="collapse navbar-collapse" id="Navbar">
                <ul class="navbar-nav mr-auto">
                <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                </ul>
           </div>
        </div>

         
    </nav>

【问题讨论】：

标签： html bootstrap-4 navbar nav togglebutton

【解决方案1】：

您需要从按钮中删除.navbar-toggler，因为默认情况下它使用display:none;

然后您还需要从#Navbar 中删除.navbar-collapse，因为它会强制使用display: flex !important 显示该项目。

<nav class="navbar navbar-dark navbar-expand-sm  fixed-top ">
    <div class="container">
        <button type="button" data-toggle="collapse" data-target="#Navbar">
            <span class="navbar-toggler-icon"></span>
            Text
        </button>
        <a class="navbar-brand mr-auto" href="#">Ristorante con Fusion</a>
        <div class="collapse" id="Navbar">
            <ul class="navbar-nav mr-auto">
            <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
            </ul>
       </div>
    </div>
</nav>

仔细检查您是否添加了 jQuery 库和 Bootstrap Js。如果没有，您可以参考下面的链接。

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

【讨论】：

您的意思是，您只希望按钮和导航栏出现在桌面上而隐藏在移动设备上对吧？
@PetrosBelachew - 你添加了 jquery 和 bootstrap js 吗？当我调整到较小的屏幕时，我尝试了您的代码及其工作。在 Desktop 上，只有 Ristorante 文本和菜单可见。然后，如果您在移动设备上调整大小，按钮将显示并且菜单将被隐藏。当您单击按钮时，它将显示下拉菜单。
Thank you.popper.min.js 文件不幸从文件夹中删除。添加后我的问题解决了。
@PetrosBelachew - 太棒了！

【解决方案2】：

在<button>标签中试试这个

onclick="document.location='link.html'"

(link.html) 应该是您要打开的任何页面

【讨论】：

切换按钮必须显示项目，但它不起作用。我已经尝试过，它会刷新特定页面。我想显示不同的项目。

【解决方案3】：

您需要将要访问的网站链接到 href。只需将 # 替换为您网站的链接即可。如果它与 index.html 位于同一文件夹中，则您也不需要 ./ 在您的 html 文档前面

  <nav class="navbar navbar-dark navbar-expand-sm  fixed-top ">
        <div class="container">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand mr-auto" href="ristorante.html">Ristorante con Fusion</a>
            <div class="collapse navbar-collapse" id="Navbar">
                <ul class="navbar-nav mr-auto">
                <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="aboutus.html">About</a></li>
                <li class="nav-item"><a class="nav-link" href="menu.html">Menu</a></li>
                <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
                </ul>
           </div>
        </div>

         
    </nav>

【讨论】：

我试过了。但是，问题在于显示菜单项（页面）而不是特定页面。切换按钮不显示项目。
所以你想在点击 Ristorante con Fusion 按钮时显示项目？
不。我想在小屏幕尺寸上单击切换按钮时显示项目。