Question

我正在尝试使用jQuery实现类似抽屉的效果。我的页面由两个重叠的div组成，其中顶部div稍微向侧面移动，显示了一些底部div。

当我将鼠标悬停在底部div上时，我希望顶部div稍微移动，当我点击底部div时，我希望顶部div在页面上滑动。

我无法弄清楚的是如何让它以另一种方式工作，也就是说，如何在“开放”时应用转换顶部div？

打开抽屉的代码：

$('#bottom-page').on({
    mouseenter: function () {
        $("#top-page").css({
            "-webkit-transform": "translate3d(15%,0,0)",
                "transform": "translate3d(15%,0,0)"
        });
    },
    mouseleave: function () {
        $("#top-page").css({
            "-webkit-transform": "translate3d(10%,0,0)",
                "transform": "translate3d(10%,0,0)"
        });
    },
    click: function () {
        $("#top-page").css({
            "-webkit-transform": "translate3d(90%,0,0)",
                "transform": "translate3d(90%,0,0)"
        });
        $(this).off('mouseenter mouseleave');
    }
});

Answer 1

这样的事情怎么样？（Fiddle）

enableDrawerHover();

$('#bottom-page').on({
    click: function () {
        if ($(this).hasClass('open')) {
            $("#top-page").css({
                "-webkit-transform": "translate3d(10%,0,0)",
                "transform": "translate3d(10%,0,0)",
            });
            $(this).removeClass('open');
            enableDrawerHover();
        }
        else {
            $("#top-page").css({
                "-webkit-transform": "translate3d(90%,0,0)",
                "transform": "translate3d(90%,0,0)",
            });
            $(this).addClass('open');
            $(this).off('mouseenter mouseleave');
        }
    }
});

function enableDrawerHover() {
    $('#bottom-page').on({
        mouseenter: function () {
            $("#top-page").css({
                "-webkit-transform": "translate3d(15%,0,0)",
                "transform": "translate3d(15%,0,0)"
            });
        },
        mouseleave: function () {
            $("#top-page").css({
                "-webkit-transform": "translate3d(10%,0,0)",
                "transform": "translate3d(10%,0,0)"
            });
        }
    });
}

带悬停和点击功能的jQuery抽屉

1 个答案: