Bootstrap 4:单击菜单选项后如何关闭主下拉导航栏？

在Bootstrap 4中，可以使用JavaScript来关闭主下拉导航栏。具体的步骤如下：

首先，确保你已经引入了Bootstrap的JavaScript文件，通常是通过以下代码之一：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<!-- 或者 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.6.0/js/bootstrap.min.js"></script>

在菜单选项的链接中添加data-toggle="collapse"和data-target=".navbar-collapse"属性，以便在单击菜单选项时触发导航栏的折叠效果。例如：

<a class="nav-link" href="#section1" data-toggle="collapse" data-target=".navbar-collapse">菜单选项1</a>

在菜单选项的链接中添加自定义的JavaScript代码，以便在单击菜单选项后关闭主下拉导航栏。例如：

<a class="nav-link" href="#section1" data-toggle="collapse" data-target=".navbar-collapse" onclick="$('.navbar-collapse').collapse('hide')">菜单选项1</a>

这样，当用户单击菜单选项时，主下拉导航栏会自动关闭。

关于Bootstrap 4的更多信息和使用方法，你可以参考腾讯云的相关产品文档：Bootstrap 4。

相关·内容

前端|BootStrap 布局组件

基于DotNet构件技术的企业级敏捷软件开发平台 - AgileEAS.NET平台开发指南 - 系统管理使用教程

前言所谓AgileEAS.NET平台系统管理即指AgiLeEAS.NET平台中用于完成插件的发现、安装、配置及组织管理功能的一组具体应用，以及提供的基于AgileEAS.NET平台的应用系统所提供的一组基础应用如账户、角色、权限管理等等。 AgileEAS.NET平台目前实现了基于WinForm技术的全部管理业务模块，AgileEAS.NET平台平台系统管理中的所有模块也是基于AgileEAS.NET平台所提出的平台加插件的模式所开发，其本身就是一组插件，运行于Agil

Jump Start Bootstrap 第3章

在这一章，我们将开始使用Bootstrap的一些非常有用的HTML组件。诸如按钮、标题(headers)、导航菜单和评论系统的组件经常被用在网站上。通过组件，Bootstrap可以简单和快速的帮我们在网站上添加这些功能。

原 Intellij IDEA 2017

这个章节让你熟悉Intellij IDEA的用户界面，以便帮助你更好的在工作环境中使用。当你第一次运行Intellij IDEA或者没有打开项目时，Intellij IDEA显示欢迎页面，以便能够快

分享一个扁平化UI风格网站

「网址」：https://www.runoob.com/manual/Flat-UI/

后台系统设计（上篇：选择）

在单个选项下，存在多组互斥选项，且互斥选项组之间存在一定关系，可以考虑混用分段控件和常规按钮，由于分段控件在视觉上占用更大的面积，故给人在层级上更加置前。

手机网页用Bootstrap还是jQuery Mobile

很多新手纠结这个问题？两个框架都能够支持做手机网页，那么它们的区别是什么呢，适用场景是什么呢？下面我们从这几个方面比较这两个框架：解决问题、功能、适用场景。解决问题 Bootstrap是一个css框架，针对解决的问题有：跨设备的网页响应式布局问题。随着手机、平板、各分辨率屏幕的出现，如何能够一套前端在所有设备上自由适应？多人合作的前端布局和样式的规范问题常用前端css组件，如按钮、连接、表单、表格、分页组件、下拉菜单、导航栏、ICON等等常用JS前端组件（需要扩展js支持），

010

Visual Studio 2008 每日提示(十三)

#121、如何设置vs启动时（工作区）加载内容原文链接：How to customize what Visual Studio opens to 操作步骤：菜单：工具+选项+环境+启动，在“启动时”下拉框中根据需要选择以下几项： 1、打开主页 2、加载最近加载的解决方案 3、显示“打开项目”对话框 4、显示“新建项目”对话框 5、显示空化境 6、显示起始页评论：我一般选择“空环境”或“加载最近加载的解决方案”，后者是如果我经常开发一个项目时用，前者我一般同时开发多个项目是用，这样可以根据自己的

Bootstrap响应式前端框架笔记十——导航栏相关组件

Bootstrap中提供的导航栏分为两种模式，使用nav-tabs类可以创建页卡模式的导航栏，使用nav-pills类可以创建胶囊模式的导航栏，示例如下：

Android开发笔记（四十三）点击事件

1、单击事件，主要用于Button和ImageButton控件，布局视图与TextView、ImageView控件用的也比较多。相关类名与方法说明如下：监听器类名 : View.OnClickListener 设置监听器的方法 : setOnClickListener 监听器需要重写的点击方法 : onClick 2、长按事件，较少使用，一般长按要么弹出提示对话框，要么弹出上下文菜单（上下文菜单只需注册就好，无需额外处理长按事件）。相关类名与方法说明如下：监听器类名: View.OnLongClickListener 设置监听器的方法 : setOnLongClickListener 监听器需要重写的点击方法 : onLongClick 3、组合按钮点击事件，一般用于CheckBox控件。相关类名与方法说明如下：监听器类名 : CompoundButton.OnCheckedChangeListener 设置监听器的方法 : setOnCheckedChangeListener 监听器需要重写的点击方法 : onCheckedChanged 4、单选按钮点击事件，只能用于RadioGroup视图。相关类名与方法说明如下：监听器类名 : RadioGroup.OnCheckedChangeListener 设置监听器的方法 : setOnCheckedChangeListener 监听器需要重写的点击方法 : onCheckedChanged 常用按钮点击事件的具体实现代码可参考《Android开发笔记（三十七）按钮类控件》。

小程序界面设计指南

“上一期文章讲了小程序平台的特点以及场景需求，这一期文章主讲小程序设计规范，这是我通过阅读官方文档后归纳总结的，需要详细了解的小伙伴可以去看官方设计指南，文末有链接。” 文章大纲 01 用户体验要点 02 字体规范 03 控件规范 04 页面加载 05 页面状态总结资源 01 — 用户体验要点轻量、简洁、目标明确减少无关的设计元素对用户目标的干扰，每个页面都应该有明确的重点，便于用户每进入一个新页面时都能快速地理解页面内容。清晰明确地告知用户身在何处、又可以往何处去，确保用户在页面中游

【12】2小时还你一个集打赏、评论、RSS功能于一身的个人博客

几个月前，写过几篇关于Hexo博客搭建的教程，最近几天，发现有很多读者私信我一些Hexo搭建过程中遇到的问题，重新燃起了我对Hexo博客的兴趣，于是花了一两天的时间重新将Hexo博客搭建了一下，并通过配置实现了一些附加功能，写下此篇博客，希望可以帮助读者们深入Hexo博客的使用。

Mirages主题帮助文档

将压缩包内1.主题文件文件夹中的Mirages文件夹完整上传到服务器上 Typecho 的/usr/themes/文件夹内，然后到 Typecho 后台，启用主题即可。

Android开发笔记（二十）顶部导航栏ActionBar

ActionBar是在Android3.0之后引入的，所以Android2.x之前的版本不能直接使用ActionBar。现在ActionBar广泛用做APP的顶部导航栏，它在布局上主要分为三部分：左边是返回区域，包括logo、返回箭头、左侧标题等等；右边是菜单区域，放的是溢出菜单OverflowMenu的各菜单项；中间是条件区域，包括导航项Navigation（下拉列表与标签切换）、搜索框SearchView，以及可自定义的定制视图CustomView。显示或者关闭ActionBar的方式有如下几种： 1、在AndroidManifest.xml中给activity设置无标题栏的主题，就关闭ActionBar。否则就显示

超好看的30款网站侧边栏设计

侧边栏其实就是一种比较经典的网站导航设计，它的形式通常为竖向的一列，展示在网站的右侧或者左侧，具体的位置当然是取决于整体的设计。

原 Intellij idea2017编辑

编辑器总览基础在创建和修改代码的时候，编辑器是是否有用的工具。所有的其他的编辑器也都支持书签，断点，语法高亮，代码提示，Zooming，代码折叠等。当然这里还有很多诸如宏指令，高亮TODO，代码分析、事件、快捷智能导航的高级特性。可以使用setting中的editor配置编辑器环境。也可以通过ctrl+~的方式选择更改样式、主题、快捷键等。这个编辑器是基本的，所有的语境菜单上的操作都是可用的。当然你也可以通过Window | Editor tabs上的节点来操作。活动编辑器当你打开一个文件编辑的

深入理解bootstrap

1.CSS12栅格系统：以规则的网格阵列来指导和规范网页中的版面布已有以及信息分布

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

Bootstrap 4:单击菜单选项后如何关闭主下拉导航栏？

相关·内容

vue博客实战---博客首页开发

Jump Start Bootstrap 第4章

前端|Bootstrap——导航组件

前端|BootStrap 布局组件

基于DotNet构件技术的企业级敏捷软件开发平台 - AgileEAS.NET平台开发指南 - 系统管理使用教程

Jump Start Bootstrap 第3章

原 Intellij IDEA 2017

分享一个扁平化UI风格网站

后台系统设计（上篇：选择）

手机网页用Bootstrap还是jQuery Mobile

Visual Studio 2008 每日提示(十三)

Bootstrap响应式前端框架笔记十——导航栏相关组件

Android开发笔记（四十三）点击事件

小程序界面设计指南

【12】2小时还你一个集打赏、评论、RSS功能于一身的个人博客

Mirages主题帮助文档

Android开发笔记（二十）顶部导航栏ActionBar

超好看的30款网站侧边栏设计

原 Intellij idea2017编辑

深入理解bootstrap

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐