jQuery IF 不使用相对位置 + 百分比值

Question

我真的很纠结这个问题。

我正在尝试使用 jquery 创建一个左右滑动以隐藏自身的菜单。

我需要将其设置为 left: 100% 并在单击切换按钮时将其设置为 left: 0

为此，我还需要它是相对位置。但是，如果它有 position relative，jquery if 似乎不起作用。

$('.menu-toggle').click(function(){
        if ( $('.menu').css('left') == '100%' ) {
            alert('left 100%');
            $(this).text('keyboard_arrow_right');
            $('.menu').stop().animate({
                left: 0
            }, 500);
        }
        else {
            alert('left not 100%');
            $(this).text('menu');
            $('.menu').stop().animate({
                left: '100%'
            }, 500);
        }
});

我做了这个 fiddle 是为了更容易测试:https://jsfiddle.net/z2cjLrtq/2/

如果您尝试从 fiddle 中删除 position relative，代码可以工作但是，left: 100% 不会做任何事情，因为它没有没有相对位置

我也尝试过使用 px 而不是 % 并且效果很好!但这对我也没有任何好处，因为它将是一个宽度可变的动态菜单。

我开始认为这是一个 jquery 错误...

有什么解决办法吗？

非常感谢您的帮助。

提前致谢

Answer 1

$('.menu').css('left') 返回以像素为单位的实际(计算)值，例如0px 或 879px，而不是 100%。

因此你所要做的就是反转你的逻辑，这样你就可以检查 0px 的情况(当菜单在左边时)而不是试图计算出哪个像素值等于100%。像这样:

$('.menu-toggle').click(function(){

        if ( $('.menu').css('left') == '0px' ) {
            $(this).text('menu');
            $('.menu').stop().animate({
                left: '100%'
            }, 500);
        }
        else {
            alert($('.menu').css('left'));
            $(this).text('keyboard_arrow_right');
            $('.menu').stop().animate({
                left: 0
            }, 500);
        }
});