Question

我真的在这个上苦苦挣扎。

我试图创建一个左右滑动的菜单，用jquery隐藏自己。

我需要将其设为left: 100%，点击切换后，将其设为left: 0

为此，我还需要它position relative。但似乎如果它有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);
        }
});

我做了这个小提琴，以便更容易测试：https://jsfiddle.net/z2cjLrtq/2/

如果您尝试从小提琴中移除position relative，代码就会起作用，然后，left: 100%不会做任何事情，因为它没有{{1} }}

我也尝试使用position relative代替px，它也可以使用！但这对我没有任何好处，因为它将是一个流动宽度的动态菜单。

我开始认为这是一个jquery bug ...

有没有解决方案？

我真的很感激一些帮助。

提前谢谢

Answer 1

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

因此，您所要做的就是颠倒逻辑，以便检查0px情况（当菜单位于左侧时），而不是尝试确定哪个像素值等于{{1 }}。像这样：

100%

Answer 2

一个简单的解决方案是在隐藏时添加一个类，就像我在后面的jsfiddle中所做的那样。这样做的一个优点是，您可以随时获取菜单的状态（隐藏或不隐藏），只需检查它是否具有该类。

jsfiddle

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

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

2 个答案: