Question

我有一个＆＃34;手机＆＃34;菜单也在桌面版上见这里：
http://bit.ly/1JTBuWy

点击＆＃34;汉堡＆＃34; menu触发整个换行div的不透明度。你可以在链接中看到效果。我想添加的只是另一个触发器，当它打开时关闭菜单不仅可以通过再次点击汉堡包菜单而且还可以在整个左侧显示屏幕

这是我在点击时触发的代码的一部分：

jQuery("#page-cover").css("opacity",0.6).fadeIn(300);

这会使它退去：

jQuery("#page-cover").css("opacity",0.6).fadeOut(300);

由于

谢谢

Answer 1

您可以定义一个位于屏幕左侧的不可见div，它通过jQuery检测鼠标onclick事件

CSS

.invisibleLeft {
    position:absolute;
    top:0;
    left:0;
    width:10%;   
}

HTML

<div class="invisibleLeft"></div>

的javascript

$(".invisibleLeft").on("click", function(){
    $("#page-cover").css("opacity",0.6).fadeIn(300);
});

Answer 2

所以基本上要归功于@Mox
我决定使用现有的＆＃34;页面封面＆＃34; div并将其用作单击触发器以获得相同的结果：

jQuery("#page-cover").click(function() {
    jQuery(this).animate({
            right : '0',
    })
    jQuery('body').animate({
            right : '0',
    })
    jQuery('.menu').animate({
            right : '-250',
    })
    jQuery(this).css("opacity",0.6).fadeOut(300);
})

像魅力一样工作！感谢

单击一个元素会淡出div

2 个答案: