使用 Bootstrap,如何在外部单击后关闭菜单?
Posted
技术标签:
【中文标题】使用 Bootstrap,如何在外部单击后关闭菜单?【英文标题】:Using Boostrap, how can I make a menu close after clicking outside? 【发布时间】:2022-01-21 05:03:18 【问题描述】:截至目前,我没有使用任何 JS 来打开/关闭汉堡菜单。我正在使用 Boostrap 的内置功能来打开/关闭它。
我的 html 代码:
<div class="container">
<h3 class="brandname">
<a href="javascript:void(0);" style="font-family: 'Inter', sans-serif; font-weight: 600;">Raffle<span>Hive</span></a>
</h3>
<a class="navbar-brand" href="javascript:void(0);"></a>
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarsExample01" style="">
<ul class="navbar-nav ms-auto align-items-center">
<li class="nav-item">
<a class="nav-link active jumper" style="font-family: 'Inter', sans-serif; font-weight: 500;" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item ms-2">
<a class="nav-link jumper" style="font-family: 'Inter', sans-serif; font-weight: 500;" href="#features">Features</a>
</li>
<li class="nav-item ms-2">
<a class="nav-link jumper" style="font-family: 'Inter', sans-serif; font-weight: 500;" href="#statistics">Statistics</a>
</li>
<li class="nav-item ms-2">
<a class="nav-link jumper" style="font-family: 'Inter', sans-serif; font-weight: 500;" aria-current="page" href="#plans">Plans</a>
</li>
<li class="nav-item ms-2">
<a class="nav-link jumper" style="font-family: 'Inter', sans-serif; font-weight: 500;" href="#faq">FAQ</a>
</li>
<li class="nav-item ms-3">
<a class="nav-link btn btn-primary py-1 px-4" style="font-family: 'Inter', sans-serif; font-weight: 500;" href="#">Dashboard</a>
</li>
</ul>
</div>
</div>
用户应该能够单击外部的任意位置(在本例中为下方)以关闭菜单,而无需单击汉堡图标。
如果我没记错的话,我相信我需要使用 JS,但不知道从哪里开始。
【问题讨论】:
【参考方案1】:添加
$(document).ready(function ()
$(document).click(function ()
// if($(".navbar-collapse").hasClass("in"))
$('.navbar-collapse').collapse('hide');
//
);
);
解决了这个问题。
【讨论】:
以上是关于使用 Bootstrap,如何在外部单击后关闭菜单?的主要内容,如果未能解决你的问题,请参考以下文章