我有以下移动菜单代码,我已经使用了一段时间了。效果很好。我通过 css 添加了一个动画,因此当单击菜单按钮时,它会添加一个平滑滚动的动画 - 但我注意到它在第一次单击时不起作用 - 第一次单击后的所有单击都起作用。另外,如果您在我的 jquery 代码中看到一些粗俗的内容,请告诉我,我是 jquery 的新手,并试图通过实践来学习。
任何帮助或对我正在寻找的东西的见解,试图解决这个问题将不胜感激。
jQuery(function() {
//show the menu when button is clicked
jQuery('#menu_btn').click(function() {
if(jQuery('#menu').is(':visible')) {
jQuery('#menu').animate({ left: '-100%' }, 'slow', function () {
jQuery("#menu").css('display', 'none');
jQuery('#menu_close').css('display', 'none');
});
} else {
jQuery("#menu").css('display', 'block');
jQuery('#menu').animate({ left: '0' }, 'slow', function(){
jQuery('#menu_close').css('display', 'block');
});
}
});
//close menu when X button is clicked
jQuery('#menu_close').click(function() {
jQuery('#menu').animate({ left: '-100%' }, 'slow', function () {
jQuery("#menu").css('display', 'none');
});
});
callOnResize();
});
jQuery(window).resize( function(){
callOnResize();
});
function callOnResize() {
var winwidth = jQuery(window).width();
if (winwidth < 760) {
jQuery( '#menu' ).css({ display: 'none' });
jQuery('#menu').animate({ left: '0' }, 'slow');
} else if (winwidth >= 760) {
jQuery( '#menu' ).css({ display: 'block' });
}
}
菜单的 html 是一个非常简单的 ul li
View ,由 wordpress 输出
<div id="menu">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
最佳答案
如果元素占用了文档中的空间,则它们被视为可见。可见元素的宽度或高度大于零。
默认情况下“display:none”不应显示您的菜单 div“#menu”。
脚本应该是这样的:
jQuery('#menu_btn').click(function() {
if(jQuery('#menu').is(':hidden')) {
jQuery("#menu").css('display', 'block');
jQuery('#menu').animate({ left: '0' }, 'slow', function(){
jQuery('#menu_close').css('display', 'block');
});
});
} else {
jQuery('#menu').animate({ left: '-100%' }, 'slow', function () {
jQuery("#menu").css('display', 'none');
jQuery('#menu_close').css('display', 'none');
}
});
关于javascript - 我应该如何更改我的 jquery 脚本以在第一次单击时为移动菜单设置动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44576980/