Bootstrap -如何不通过单击打开子菜单
Bootstrap是一个流行的前端开发框架，它提供了丰富的CSS和JavaScript组件，可以帮助开发者快速构建响应式和美观的网页界面。
在Bootstrap中，可以通过以下步骤来实现不通过单击打开子菜单：
- 首先，在HTML中引入Bootstrap的CSS和JavaScript文件。可以通过以下方式引入：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>- 在HTML中创建一个导航栏（Navbar）组件，并添加一个下拉菜单（Dropdown）组件。可以使用Bootstrap提供的CSS类来实现样式和布局。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
子菜单
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">子菜单项1</a></li>
<li><a class="dropdown-item" href="#">子菜单项2</a></li>
<li><a class="dropdown-item" href="#">子菜单项3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>- 在上述代码中，通过添加
dropdown和dropdown-menu类来创建下拉菜单。点击<a>标签时，下拉菜单会自动展开或收起。
这样，当用户将鼠标悬停在子菜单的父菜单上时，子菜单会自动展开，而不需要通过单击来打开子菜单。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。
相关·内容
我使用bootstrap与wordpress wp_nav_menu，我不想显示下拉菜单点击，只是悬停，但我不知道如何才能做到这一点。.dropdown:hover .dropdown-menu display: block;<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.1.1/jquery.min.js"></script&g
浏览 5提问于2017-06-14得票数 0
在bootstrap中，如果用户是通过单击子菜单打开子菜单页面，那么它的父菜单应该有黑色背景，以便在哪个菜单下可以看到该页面是coming.Can有人帮助我如何通过使用css或jquery？
浏览 2提问于2015-09-11得票数 0
我有以下情况：如您所见，在标题中，我有一个水平的主菜单，其中包含“超级声音”主声音。单击它将显示包含“子语音”的子菜单
如你所见，要看到子菜单，我必须点击我的主菜单上的超级声音。要创建此菜单，我必须使用wp_bootstrap_navwalker类，插入wp_bootstrap_navwalker.php
浏览 5提问于2014-03-03得票数 0
我正在为Drupal 8创建一个自定义的引导主题，我的目标是使主导航菜单下拉子项处于悬停状态，而不是让用户单击，我发现了一些建议，比如在我的主题中将它添加到我的CSS中：}
但这对我的主题没有影响，我仍然需要点击下拉菜单。
浏览 7提问于2016-07-02得票数 1
回答已采纳
1回答
·AngularJS 1.2.16·AngularUI Bootstratp 0.11.0<a href="#" class="dropdown-toggle" data-toggle="dropdown(
浏览 2提问于2014-06-08得票数 15
回答已采纳
我使用的是Bootstrap 3.1.1和dropdown --我已经建立了一个带有子菜单的下拉菜单。每个菜单在单击时都会打开和关闭，但问题是，如果我先打开一个子菜单，然后再打开另一个子菜单，那么第一个子菜单仍然是打开的。我希望任何打开的子菜单在打开
浏览 12提问于2015-07-17得票数 1
我是Bootstrap的新手，我正在尝试使用导航药丸创建一个可折叠/可扩展的垂直导航菜单，该菜单一次只允许展开一个菜单项组。我遇到的问题是，我希望同时只允许一个组打开。因此，
浏览 2提问于2015-05-30得票数 0
1回答
使用CSS在移动设备上自动滚动
、、、、
我当前的网站菜单是通过Bootstrap开发的。目前，当其中一个子菜单打开而我打开另一个子菜单时，初始子菜单关闭，迫使选项卡向上滑动，所以我不是看菜单的顶部，而是看中间甚至底部，这取决于我单击打开第二个子菜单时屏幕下方有多远。有没有一种方法，通过使用CSS，我可以强制屏幕从子菜单回到顶部，这样当我打开<
浏览 0提问于2018-01-02得票数 0
1回答
我正在使用bootstrap mega菜单。在悬停时，它会打开子菜单，但有时也需要单击事件，子菜单被卡住了。在我的javascript中，没有提到任何单击事件，只有悬停代码。
浏览 2提问于2018-11-28得票数 1
当其子菜单处于活动状态时，我需要打开子菜单(就像用户在该页面上一样)。它需要保持打开，除非它被特别点击。只有在外部单击时，才能阻止它关闭：jQuery('.current-menu-parent').on('hide.bs.dropdown', function() {
return fals
浏览 0提问于2017-07-12得票数 0
回答已采纳
我正在使用导航栏中带有子菜单项的可折叠菜单。菜单在窄屏幕上可以正确折叠，并且子菜单项可以正确显示。当我在桌面浏览器上测试
浏览 0提问于2013-07-03得票数 17
回答已采纳
1回答
我正在使用Bootstrap下拉菜单。css("display", "block"); $('#submenu-birthday_occasion').mouseover();此脚本位于主菜单的但是在单击外部菜单后(在页面的其他内容上)。它不会触发mouseover()事件。
加载页面后，只需在第一个菜单(场合)上悬停。它将打开“生日
浏览 3提问于2014-01-21得票数 0
回答已采纳
我是新手在Bootstrap，我想知道如何添加下拉菜单上的关闭按钮。不是默认的Bootstrap响应，当我们在菜单外部单击时，或者当我们单击“没有子菜单项”时，我想添加一个关闭按钮，并使它负责切换它。关闭按钮必须同时出现在菜单及其子菜单“查看图片和关闭图标的位置”中。
我工作的代码是“下拉菜单项是‘杂志’，‘旅行单人’是子菜单
浏览 4提问于2016-07-13得票数 2
的问题是，当我单击菜单打开一个子菜单时，如果有其他子菜单打开，它们将关闭，除了我刚刚打开的子菜单，并且能够通过单击它的菜单父菜单关闭该子菜单。show-menu"),
$(this).children(".submenu").toggleClass("show-
浏览 4提问于2015-03-29得票数 0
回答已采纳
我试图在下拉菜单中创建twitter bootstrap子菜单，但我遇到了一个问题:我在页面的右上角有下拉菜单，该菜单还有一个子菜单。但是，当子菜单打开时-它不适合窗口，并且向右移动太多，因此用户只能看到第一个字母。如何使该子菜单不是向右打开，而是向左打开？
浏览 3提问于2012-08-30得票数 94
回答已采纳
3回答
移动菜单下拉问题
、、
这里是我的网站：，问题是当网站在移动中打开第二个菜单时，名字是“女性”，不像菜单上的“男人”。
它打开下拉菜单，但立即重定向到子菜单3。
浏览 1提问于2018-05-16得票数 1
回答已采纳
1回答
我工作的网站，有一个网站，这是建立在Umbraco上，并利用bootstrap和Jquery。当在移动设备上查看此菜单时，它会变成一个汉堡包，当您单击它时，它会下拉并显示主要选项卡。在这里，当您单击main选项卡时，它会快速显示子菜单，但随后会转到main选项卡，而不是允许您
浏览 0提问于2016-11-02得票数 0
2回答
在子菜单内切换子菜单
、、、、
我在试着切换菜单上的项目。现在，我有3个图标，当他们被点击，UL下拉-移动在点击图标下打开。单击“主菜单项”时，“子菜单项”应滑动打开，单击“子菜单项”，“子菜单项”应滑动打开。现在，我似乎只能滑动打开UL下拉移动，但我不知道如何使它，以便我可以切换子菜单在里面。因此，我有以下布局作为
浏览 3提问于2015-12-21得票数 1
回答已采纳
4回答
我试图击败一个基本手风琴风格的菜单，以提交-使用jQuery。这是菜单：
$('#access ul li').click(function(){ $(this).children('ul:hidden').slideDown();
问题:单击子菜单链接会使子</em
浏览 5提问于2011-07-09得票数 1
回答已采纳
我一直在做的一个Bootstrap网站出了点问题。我根本不是一个bootstrap或javascript专家，我只是简单地买了一个主题，并对它进行了一点修改，希望它能在基础水平上工作。正在使用的引导程序版本是2.2.1，问题是下拉菜单在智能手机或平板电脑上无法正常工作。当您单击information菜单时，下拉菜单打开。当您单击任何子菜单项(我们的第一页、第二页等)时，它应该会
浏览 3提问于2013-07-29得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
