[英]How to disable the click and scroll of the page?
我在网站的左下方创建了一个“更多”按钮,以显示菜单。
当您单击按钮时,+变为x
我希望当您单击+时,单击和滚动将在页面上被禁用。
<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 {
overflow: hidden;
pointer-events: none;
}
这是我的JS文件:
(function ($) {
$('#dropdown-menu-action').on('show.bs.dropdown', function () {
$('body').addClass('overlay-is-navbar-collapse');
});
$('#dropdown-menu-action').on('hide.bs.dropdown', function () {
$('body').removeClass('overlay-is-navbar-collapse');
});
})(window.jQuery);
UPDATE
以下代码不起作用。 如果单击外部,则菜单关闭,但课程仍保留在主体上。
$('#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');
});
在您的JavaScript文件中,添加click
处理程序以切换主体类名称overlay-is-navbar-collapse
(function ($) {
$('#dropdown-menu-action').on('click', () => {
$('body').toggleClass('overlay-is-navbar-collapse');
});
})(window.jQuery);
并删除 pointer-events: none
从CSS文件中删除任何 pointer-events: none
,否则,一旦添加了类名overlay-is-navbar-collapse
,便无法再次单击该按钮。
.overlay-is-navbar-collapse {
overflow: hidden;
}
您可以在主体上添加一个类以直接在所需的任何轴或所有轴上禁用滚动或编辑样式。 body.class { overflow-y: hidden; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.