Bootstrap 4.5 iPhone/iPad上的导航栏折叠按钮打开菜单但立即关闭

基础概念

Bootstrap 是一个流行的前端框架，用于快速开发响应式和移动优先的网站。Bootstrap 4.5 是该框架的一个版本，提供了许多组件和工具，以简化网页设计和开发。导航栏（Navbar）是 Bootstrap 中的一个核心组件，用于在页面顶部显示导航链接。

问题描述

在 iPhone 或 iPad 上，Bootstrap 4.5 的导航栏折叠按钮打开菜单后，菜单会立即关闭。

可能的原因

JavaScript 事件冲突：可能是由于 JavaScript 事件处理不当导致的。
CSS 样式问题：可能是某些 CSS 样式影响了导航栏的正常显示。
触摸事件处理：移动设备上的触摸事件可能与桌面浏览器的鼠标事件处理方式不同，导致问题。

解决方法

以下是一些可能的解决方案：

1. 确保 jQuery 和 Bootstrap JS 文件正确加载

确保在你的 HTML 文件中正确引入了 jQuery 和 Bootstrap 的 JavaScript 文件。

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<!-- 引入 Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<!-- 引入 Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

2. 检查 JavaScript 事件处理

确保没有其他 JavaScript 代码干扰了 Bootstrap 的默认事件处理。

$(document).ready(function () {
    // 确保没有其他代码干扰 Bootstrap 的事件处理
});

3. 确保 CSS 样式正确

确保没有自定义的 CSS 样式覆盖了 Bootstrap 的默认样式。

/* 确保没有覆盖 Bootstrap 的默认样式 */
.navbar-collapse {
    display: block !important;
}

4. 使用 Bootstrap 的触摸事件处理

Bootstrap 提供了对触摸事件的支持，确保你的代码正确处理了触摸事件。

<!-- 确保在 HTML 中正确使用了 data-toggle 和 data-target 属性 -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
    <!-- 导航链接 -->
</div>

示例代码

以下是一个完整的示例，展示了如何在 Bootstrap 4.5 中正确设置导航栏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Navbar Example</title>
    <!-- 引入 Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Brand</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <!-- 引入 Popper.js -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <!-- 引入 Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

参考链接

通过以上步骤，你应该能够解决 Bootstrap 4.5 在 iPhone 或 iPad 上导航栏折叠按钮打开菜单后立即关闭的问题。

Bootstrap两个导航栏折叠

、

在bootstrap中，我想让两个导航栏位于彼此的下方。我的想法是：导航栏2(在navbar1下面)有一个名为: sub menu的品牌。当用户在他的移动电话上查看网站时，他/她看到两个可折叠的导航栏。用户现在可以选择要打开的

浏览 1提问于2013-12-20得票数 20

回答已采纳

3回答

Bootstrap 3..navbar切换切换状态

、、、

我正在使用bootstrap 3.0，并在一个移动网站上工作。我想知道如何改变按钮的背景颜色。导航栏-当导航栏折叠时切换。基本上我想问的是，当导航栏菜单打开时，如何在移动设备上显示“按下”状态？

浏览 5提问于2013-09-21得票数 1

2回答

使肚脐折叠/按下关闭

、、、、

我很难让移动设备上的导航栏与我的网站崩溃。这个问题只与该网站的移动版本有关。当我点击一个菜单按钮，网站滚动到正确的点，但导航条仍然打开，这是令人讨厌的。我尝试给UL元素相同的类，比如导航条中的"back“按钮，它可以折叠导航条，但</em

浏览 2提问于2017-12-22得票数 0

回答已采纳

1回答

单击后如何在bootstrap* 5中隐藏导航栏*

、

我需要帮助隐藏/折叠导航栏后，在一个锚点登陆页面。我在Bootstrap 4.x上使用了这个脚本 <script type="text/javascript "> $(document).on('click', '.navbar-collapse但是，在加载/重新加载页面时，导航栏默认展开而不折叠，不漂亮这个漂亮的例子：http

浏览 46提问于2021-06-29得票数 0

回答已采纳

2回答

当用户触摸屏幕表面的任何部分而不是菜单时，如何关闭响应式引导菜单？

、、、、

我使用Bootstrap框架v2.0.1来设计我的网站。当在iPad、iPhone、平板电脑、智能手机等设备(不是计算机、台式机和笔记本电脑)上浏览网站时，菜单项会折叠为一个图标，并放置在屏幕的右上角。如果用户点击此图标，菜单将展开，如果用户希望他/她可以选择所需的菜单项，将打开链接到该菜单项的页面，并关闭展开

浏览 2提问于2014-10-15得票数 0

6回答

Bootstrap 3在菜单项上隐藏下拉菜单单击

、、、、

我有一个基本的Bootstrap 3响应式导航，如下所示： </ul> </

浏览 78提问于2013-08-10得票数 15

回答已采纳

1回答

如何让这个部分可折叠的导航栏在Bootstrap* 4上显示我想要的项目？*

、、

我正在尝试让Bootstrap 4导航栏只部分折叠。基本上，我希望一些对齐到右边的项目始终可见，而如果你试图在移动设备上打开网站，左边的大多数导航栏项目都会折叠成菜单。问题是，当您展开该菜单时，折叠的元素显示在固定菜单之前，正如您所期望的那样，但出于明显<

浏览 23提问于2018-08-11得票数 0

回答已采纳

1回答

Bootstrap 4:在小屏幕上使用导航栏菜单上的块级按钮，但在展开时保持正常大小的按钮

、、

我使用的是bootstrap 4 beta版。我希望这些按钮跨越宽度的导航栏下拉菜单时，屏幕很小，汉堡<e

浏览 2提问于2017-10-11得票数 0

1回答

增加引导程序折叠菜单的高度(打开时)

、、、

我已经用bootstrap创建了一个基本的站点。我正在使用bootstrap导航栏，对较小的设备使用折叠选项。所以，当我在移动设备上查看导航栏时，当关闭</e

浏览 3提问于2015-06-11得票数 2

3回答

响应灵敏的中型屏幕(平板电脑)的引导问题

、、、

我正在尝试实现一个bootstrap 3响应式设计，但由于某些原因，当显示在中等大小的屏幕上时，导航栏的视图会中断。平板电脑坏了，手机/屏幕都没问题。我尝试了很多东西，但到目前为止什么也没弄明白。正如你所看到的，这是一个中断(2行，而不是显示三条线图标。这一台很好(PC) 谢谢!

浏览 2提问于2014-12-20得票数 0

3回答

推送modalPresentationStyle = .FormSheet的UINavigationController时，SFSafariViewController显示不正确

、、

我有一个简单的设置表视图，它是UINavigationController的第一个视图。我将设置UINavigationController与.FormSheet modalPresentationStyle一起显示，这意味着在iPhone上，它占据整个屏幕，而在iPad上，它以模式居中显示现在，我希望“设置”表中的某一行将SFSafariViewController推送到导航堆栈上。这在iPhone上</

浏览 2提问于2016-01-11得票数 7

1回答

引导程序导航栏无法打开或无法关闭

、

我在我的主干项目中使用bootstrap。我现在只使用‘经典的’响应式导航栏，当你缩小浏览器或用一部手机进入时，你会看到一个按钮，这会展开响应式导航栏，如果你有大屏幕，它会看到你的提示菜单。例如 (您可以在顶部菜单中看到文本，但如果您缩小浏览器屏幕，您会看到底部) 我有一个问题在打开/关闭时刻在移动/低分辨率/等。如

浏览 0提问于2013-04-03得票数 0

6回答

Bootstrap折叠菜单链接在移动设备上不起作用

、、、

我正在使用导航栏中带有子菜单项的可折叠菜单。菜单在窄屏幕上可以正确折叠，并且子菜单项可以正确显示。但是，当我在移动设备上单击子菜单项时，链接不起作用。相反，子菜单会折叠，并且折叠菜单上的顶部菜单项被高亮显示，就好像子菜单从未打开<

浏览 0提问于2013-07-03得票数 17

回答已采纳

1回答

将sitemap菜单放在引导导航栏-折叠中。当屏幕尺寸改变时删除空格

、、、、

然而，在某个断点(768px)，当我最小化并开始拖动屏幕的一个边缘来模拟移动设备时，切换按钮取代了导航栏菜单。到目前一切尚好。这就是问题开始的地方。一旦我点击切换按钮来展开折叠的菜单，菜单位于屏幕左侧大约20-30px的位置，并且不会居中，直到当菜单最终居中时，屏幕被拖到绝对最小宽度。位置:相对、绝对、左、右、中、上、下或任何其他组合似乎被完全

浏览 3提问于2017-09-04得票数 0

1回答

Bootstrap下拉菜单已经在移动分辨率上打开

、、、

我在一个网站上使用bootstrap，导航是bootstrap响应式导航栏。它可以正常折叠，但当我单击按钮打开它时，下拉菜单已经打开了。他们不会关闭，如果我点击他们，或更多。这是导航的代码：

浏览 3提问于2013-07-04得票数 0

回答已采纳

2回答

缩小屏幕尺寸并按下按钮后，中心对齐肚脐。

、、、

我是一个HTML/CSS的新手，我正在创建一个网页，上面有一个响应性导航栏。我面临的问题是，当navbar被折叠并按下按钮时，navbar-items在打开的导航菜单的左侧对齐。我希望这些项目与菜单上的中心对齐。我在和上搜索了很多，但是我无法找到解决问题的方法。下面是我正在使用的HT

浏览 4提问于2016-08-07得票数 3

回答已采纳

1回答

Bootstrap切换菜单在页面加载时展开

、、、

我有一个带有下拉菜单的导航栏，可以完美地与hover一起工作。但在智能手机上，我希望一旦点击切换菜单按钮，它就会自动打开，而不是点击打开下拉列表。我已经尝试了我在这里找到的一些代码片段，但还没有成功地使任何代码片段适应我的问题。

浏览 3提问于2014-10-02得票数 1

回答已采纳

1回答

segues之间有什么区别："show"，"show detail"，"present modally"，"present as popover"？

、、、

不同的segues在Xcode6中做什么？

浏览 0提问于2014-10-10得票数 96

回答已采纳

3回答

为什么React Bootstrap导航栏崩溃了？

、、

我遵循了React-Bootstrap文档，特别是这段代码使我的导航栏-> import React from 'react' Navbar as BoostrapNavBar,

浏览 7提问于2018-02-14得票数 1

回答已采纳

1回答

各种引导菜单问题

、、、、

我正在使用Bootstrap 3作为我正在建设的一个页面站点。我有一些thatI似乎无法克服的问题。第一个问题是关于滚动间谍。我已经实现了这一点，但是当滚动到最上面的锚时，我希望解除滚动间谍的绑定。目前导航系统中有三项，最高的一项是“工作”。当滚动到这个区域以外的网站上，我想解开“间谍”。我想出了一个想法，添加一个额外的项目到导航(一个同等的锚)，然后定位它离开页面，但这感觉有点脏！

浏览 1提问于2013-09-12得票数 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

Bootstrap 4.5 iPhone/iPad上的导航栏折叠按钮打开菜单但立即关闭

基础概念

问题描述

可能的原因

解决方法

1. 确保 jQuery 和 Bootstrap JS 文件正确加载

2. 检查 JavaScript 事件处理

3. 确保 CSS 样式正确

4. 使用 Bootstrap 的触摸事件处理

示例代码

参考链接

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐