我正在努力实现我的按钮将响应。确切地说,在菜单打开时第一次单击时,它会使整个屏幕变暗并突出显示菜单,并且overflow-y:hidden
开始工作,因为我的目标是确保菜单打开时它不会有任何滚动。当主要问题开始出现时,会隐藏溢出,当我再次单击菜单按钮时,我无法关闭。如何实现这一点?
我以前的jquery:
$("#button").click(function(){
$('.slide').fadeToggle(500);
$('.darklayer').toggleClass('active');
$('body').css({'overflow-y': 'hidden'});
});
这是我的新jquery:
$("#button").click(function(){
var $dark = $('.darklayer');
$('.slide').fadeToggle(500);
($dark).toggleClass('active');
if($dark.is(':active')) {
$('body').css({'overflow-y': 'hidden'});
}
else {
$('body').off('click');
}
}});
我的网页:
<div class="darklayer"></div>
<header id="main_menu">
<div id="menu">
<ul class="slide">
<li><a href="#">Поиск строения</a></li>
<li><a href="#">Оплатить ком услуги</a></li>
<li><a href=#>Обратиться за помощью</a></li>
<li><a href=#>Управляющая компания</a></li>
<li><a href="second_page.html">Обратиться в Акимат</a></li>
<li><a href=#>Объявления</a></li>
<li><a href="page.html">Информация о строении</a></li>
<li><a href=#>Обсуждения</a></li>
<li><a href=#>Помощь</a></li>
</ul>
</div>
<section id="main_header">
<div class="left_header">
<a href="index.html"><img src="svg/logo.svg" alt="logo" style="height: 16px; padding-left: 15px;"></a>
<p class="text_ru">ru</p>
</div>
<div class="right_header">
<img class="btn search" src="svg/search.svg" alt="search" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer; ">
<img class="btn" src="svg/pro.svg" alt="pro" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer;">
<img id="button" class="btn" src="svg/sandwich.svg" alt="sandwich" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer;">
</div>
</section>
</header>
试试这个:用户hasClass
$("#button").click(function(){
var $dark = $('.darklayer');
$('.slide').fadeToggle(500);
$dark.toggleClass('active');
if($dark.hasClass('active')) {
$('body').css({'overflow-y': 'hidden'});
}
else {
$('body').off('click');
}
}});
我认为您可以使用 if 语句中的问题
if($dark.hasClass('active'))
而不是
if($dark.is(':active'))
你能试试这个吗?
if($dark.is(':active')) {
$('body').css({'overflow-y': 'hidden'});
}
else {
$('body').css({'overflow-y': 'visible'});
}