[英]How to add a class to the body of the page, when the menu is open?
我在网站的左下方创建了一个“更多”按钮,以显示菜单。
当您单击按钮时,+变为x
https://www.s1biose.com/groupe/recettes-et-astuces
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdown-menu-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="fa-4x">
<span class="fa-layers fa-fw">
<i class="fas fa-circle"></i>
<i class="fa-inverse fas fa-plus" data-fa-transform="shrink-6"></i>
</span>
</div>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdown-menu-action">
<li><a href="/profil" data-drupal-link-system-path="profil"><i class="fas fa-id-card fa-lg"></i> Créer mon profil</a></li>
</ul>
</div>
如何在打开菜单时向页面正文添加.overlay-is-navbar-collapse
类,如何在关闭菜单时删除类?
以下代码不起作用。 如果单击外部,则菜单关闭,但课程仍保留在主体上。
$('#dropdown-menu-action').on('click', () => {
$('body').toggleClass('overlay-is-navbar-collapse');
});
我已经尝试了以下代码,但是不起作用:
$('#dropdown-menu-action').on('shown.bs.dropdown', function () {
$('body').addClass('overlay-is-navbar-collapse');
});
$('#dropdown-menu-action').on('hidden.bs.dropdown', function () {
$('body').removeClass('overlay-is-navbar-collapse');
});
你为什么不试试这个
$('#dropdown-menu-action').on('click', () => {
$('body').toggleClass('overlay-is-navbar-collapse');
});
$('.dialog-off-canvas-main-canvas').on('click', () => {
$('body').removeClass('overlay-is-navbar-collapse');
});
在添加正文的类时 ,使用.one
将侦听器附加到正文:
$('#dropdown-menu-action').on('click', () => {
$('body').addClass('overlay-is-navbar-collapse');
$('body').one('click', () => {
$('body').removeClass('overlay-is-navbar-collapse');
});
});
尝试这个,
$('dropdown-menu-action').click(function(){
if($(body).hasClass('overlay-is-navbar-collapse')){
$('body').removeClass('overlay-is-navbar-collapse');
}
else{
$('body').addClass('overlay-is-navbar-collapse');
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.