Question

我是javascript和jQuery的新手，很抱歉，如果这很容易修复。

我正在尝试从屏幕顶部向下滑动菜单。

请在此处查看我的网站：http://www.mikeybinns.com/

目前，除非你单击菜单图标3/4次，否则菜单不会关闭，当它关闭时，它没有任何过渡效果，即使它在CSS中有过渡效果。请注意，菜单图标意味着在点击时淡入淡出，菜单是一个可变高度，这就是为什么我需要使用jQuery来设置菜单的高度。

请在此处查看整个.js文件：

    var showMenu = document.getElementById('showMenu');

jQuery(function ($) {
//find menu height
    var menuheight = $(".hidden-menu").height();
//set the position of the menu (e.g. if menu is 240px tall, it would be 240-240-240-10=-250, the extra 10 is due to a drop shadow.
    var menumove = menuheight - menuheight - menuheight - 10;
//move menu to above the screen
    $(".hidden-menu").css({
        top: menumove
    });
//on click of menu icon
    showMenu.onclick = function () {
        $('#showMenu').click(function () {
//if menu has style attribute, remove attribute, otherwise, add style="top:(menu height in negative -10)px"
            if ($('.hidden-menu').attr('style')) {
                $('.hidden-menu').removeAttr('style');
            } else {
                var menushow = "top:" + menumove + "px";
                $('.hidden-menu').attr('style', menushow);
            }
        });
//menu icon fade
        $mb = $('#showMenu');
        $mb.fadeOut(200, function () {
            $mb.delay(300).fadeIn(400, function () {});
        });
    };
});

如果有人知道为什么它不能工作2/3次，请告诉我，或者如果有更好的方法，我可以完全重新编码。

谢谢，

Answer 1

您在另一个点击事件中包装您的点击事件，而不是仅仅设置页面加载。这实际上是说＆＃34;点击，设置一个功能，点击＆＃34;，这将导致您的问题。如果你摆脱了showMenu.onclick的东西，只是在加载时设置click事件，它应该修复它。这一改变对我有用：

jQuery(function ($) {
//find menu height
var menuheight = $(".hidden-menu").height();
//set the position of the menu (e.g. if menu is 240px tall, it would      be 240-240-240-10=-250, the extra 10 is due to a drop shadow.
var menumove = menuheight - menuheight - menuheight - 10;
//move menu to above the screen
    $(".hidden-menu").css({
        top: menumove
});
//on click of menu icon

    $('#showMenu').click(function () {
//if menu has style attribute, remove attribute, otherwise, add style="top:(menu height in negative -10)px"
        if ($('.hidden-menu').attr('style')) {
            $('.hidden-menu').removeAttr('style');
        } else {
            var menushow = "top:" + menumove + "px";
            $('.hidden-menu').attr('style', menushow);
        }
    });
//menu icon fade
    $mb = $('#showMenu');
    $mb.fadeOut(200, function () {
        $mb.delay(300).fadeIn(400, function () {});
    });

});

关于点击问题的jQuery

1 个答案: