javascript - Bootstrap 3.3.7 如何点击外部关闭导航栏?
问题描述
我有一个带有 Bootstrap 3.3.7 主题的 Drupal 8.6.8 站点
当我点击外部时,我希望我的导航菜单关闭。我尝试了代码:
(function ($) {
'use strict';
$(document).click(function (event) {
if (!$(event.target).closest('#navbar-collapse-first').length) {
$('.navbar-collapse-first').collapse('hide');
}
});
}(jQuery));
https://css-tricks.com/dangers-stopping-event-propagation/
它不起作用,如果我在导航菜单之外单击,它不会关闭。我希望菜单只有在我点击外部时才会关闭。除非重新加载页面,否则即使菜单链接也不应关闭菜单。
这是导航菜单按钮的代码:
<div id="block-togglenavigationfirst" class="contextual-region">
<button type="button" class="navbar-toggle-first collapsed" data-toggle="collapse" data-target="#navbar-collapse-first" aria-expanded="false">
<div class="icon-navbar-first">
<span class="fa-layers fa-3x">
<i class="far fa-circle"></i>
<span class="navbar-icon-open">
<i class="fas fa-th-list" data-fa-transform="shrink-8"></i>
</span>
<span class="navbar-icon-close">
<i class="fas fa-times" data-fa-transform="shrink-8"></i>
</span>
</span>
</div>
<div class="icon-navbar-first-alert icon-navbar-first-alert-disable">
<span class="fa-layers fa-3x">
<i class="fas fa-circle"></i>
<span class="navbar-icon-open">
<i class="fas fa-th-list fa-inverse" data-fa-transform="shrink-8"></i>
</span>
<span class="navbar-icon-close">
<i class="fas fa-times fa-inverse" data-fa-transform="shrink-8"></i>
</span>
</span>
</div>
</button>
</div>
这是导航菜单:
<div id="navbar-collapse-first" class="navbar-collapse-first width navbar-collapse-first-fixed-top collapse in" aria-expanded="true" style="">
<div class="region region-navigation-collapsible-first">
<nav role="navigation" aria-labelledby="block-useraccountmenu-menu" id="block-useraccountmenu" class="contextual-region">
<h2 class="sr-only" id="block-useraccountmenu-menu">User account menu</h2>
<ul class="menu menu--account nav navbar-nav navbar-right">
<li class="first last">
<a href="/fr/unmasquerade" title="Retourner sur votre compte utilisateur.">Cesser de se faire passer pour quelqu'un d'autre</a>
</li>
</ul>
</nav>
</div>
</div>
解决方案
尝试使用 w3schools 的这个解决方案
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_close
推荐阅读
- domain-driven-design - 用户聊天消息是否应该是聚合的?
- javascript - 如何将发布请求发送到 Wordpress rest api 有自定义字段?
- python - BS4 网页抓取到 CSV 文件,我想我也抓取了可能的行('tr')
- node.js - 使用 nodejs 压缩的 Http 响应时间比没有压缩的时间长
- javascript - 将变量推送到对象内的数组上?
- regex - 使用正则表达式识别字母/数字组合并存储在字典中
- c# - 如何访问 Xamarin.forms(适用于 android 和 iOS)中的通讯簿?
- c# - 如何计算datagridview列中的唯一值?
- bash - 使用 echo 在 bash 脚本中写入多行文本
- autohotkey - 自动复制选定的文本,在粘贴最后一个副本之前不要复制另一个文本,然后使用鼠标双击粘贴,自动热键代码