Question

我有一段时间以来一直使用的移动菜单代码。它工作正常。我通过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视图，由wordpress输出

<div id="menu">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>

Answer 1

如果元素占用文档中的空间，则认为元素是可见的。可见元素的宽度或高度大于零。

您的菜单div＆＃34;＃menu＆＃34;默认情况下不应显示＆＃34; display：none＆＃34;。

脚本应该是这样的：

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'); 
        }
    });

首次点击时如何更改我的jquery脚本以动画移动菜单？

1 个答案: