禁用并启用toggleClass后的单击
禁用并启用toggleClass后的单击
提问于 2015-06-11 18:05:30
我使用的是汉堡包菜单图标，它可以在点击时进行转换。
动画是通过.toggleClass制作的。
$(document).ready(function() {
$('#nav-hamburger-big').click(function() {
$(this).toggleClass('open');
});
});示例：http://jsfiddle.net/ampnuwsd/8/
此图标触发基本引导菜单。然而，我注意到，当您单击动画时，如果页面仍然在加载，或者当您再次快速单击它时，动画会挂起。它仍然会触发菜单弹出打开，但是转换会跳过，这会导致一个相反的图标(当菜单关闭时是X，菜单打开时是汉堡包)。
在完成第一次单击之后，是否有任何方法延迟单击的能力，比如1，5秒？
编辑:滚动脚本：
<script>
// script for smooth scrolling to anchor points
$(document).ready(function() {
$('a[href^="#"]').on('click', function(e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 901, 'swing', function() {
});
});
});
</script>致以亲切的问候。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-06-11 18:10:12
您可以暂时禁用按钮，直到转换结束时作出承诺或在.is(':animated')时不切换类。
或者更简单地说：
$('#nav-hamburger-big').click(function() {
$('#menu').is(':hidden') ? $(this).removeClass('open') : $(this).addClass('open');
});编辑：
以小提琴为基础：
- 你需要换一下按钮才能有id导航-汉堡包-大
- 将您的第一行css改为#nav-汉堡包-大div {
然后：
$(document).ready(function() {
$('a[href^="#"]').on('click', function(e) {
//disable the button first
$('#nav-hamburger-big').prop('disabled',true);
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 901, 'swing', function() {
//now re-enable
$('#nav-hamburger-big').prop('disabled',false);
});
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30788245
复制相关文章
相似问题
腾讯云开发者
