当使用滚动时,我将如何关闭推送 Canvas 菜单?或点击它。
下面是 HTML 和 Jquery。提前致谢!
$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$nav_list = $('#nav_list');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="pushmenu pushmenu-left">
<div class="menu-primary-container">
<ul id="menu-primary" class="menu">
<li><a href="http://10.0.0.127:8888/page16-sass/">Home</a></li>
<li><a href="http://10.0.0.127:8888/page16-sass/creative/">Creative</a></li>
<li><a href="http://10.0.0.127:8888/page16-sass/online/">Online</a></li>
<li><a href="http://10.0.0.127:8888/page16-sass/print/">Print</a></li>
<li><a href="http://10.0.0.127:8888/page16-sass/the-studio/">The Studio</a></li>
<li><a href="http://10.0.0.127:8888/page16-sass/work/">Our Work</a></li>
<li><a href="http://10.0.0.127:8888/page16-sass/snippets/">Snippets</a></li>
<li><a href="http://10.0.0.127:8888/page16-sass/blog/">Blog</a></li>
<li><a href="http://10.0.0.127:8888/page16-sass/contact/">Get in touch</a></li>
</ul>
</div>
<div class="mobile-phone">01268 271 858</div>
</nav>
最佳答案
在滚动时切换你的 pushmenu 类。
window.addEventListener('scroll', function(e) {
$('.pushmenu-push').removeClass('pushmenu-push-toright');
$menuLeft.removeClass('pushmenu-open');
});
如果用户在选择菜单项之前意外滚动(可能发生在触摸设备上),您可能需要添加计时器以防止菜单滚动。
关于javascript - 滚动时关闭推送菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41481981/