JQuery的点击类追加和删除叠加

-2

所以我很新jQuery的（和编码为此事），我试图做到这一点：JQuery的点击类追加和删除叠加

当有子菜单项的菜单项点击覆盖图淡入（创建模式效果），使焦点位于子菜单上。我已经能够实现这一目标，但我们并不确定采取何种最佳途径来关闭它。

用户应该能够点击覆盖图并关闭子菜单并移除覆盖图。他们也应该能够通过点击主菜单项来做同样的事情。我将指派有子菜单项的菜单项的类是“.jrm菜单类别”见下面的代码：

//Add our overlay to the body and fade it in. 
    $('.jrm-menu-categories').click(function() { 
    $('#wrap_all').append('<div id="overlay-2"></div>'); 
    $('#overlay-2').fadeIn(300); 
    }); 

// remove overlay when overlay is clicked 
$(function(){// document.ready shorthand 
    $(document).on('click','#overlay-2',function() { 
     $('#overlay-2').fadeOut('3000',function(){//use 3000 in place of 300m 
      $('#overlay-2').remove(); 
     });  
     return false; 
    }); 
});

我怎样才能实现我上面提到的？我很难过！

在此先感谢！

---------------------------更新------------------ -------------

嘿谢谢所有的答案家伙！不过，也许我需要澄清。点击时，我已经可以删除叠加层。但是我试图将覆盖层链接到“.jrm-menu-categories”类，反之亦然。

所以当单击该类时会弹出叠加层。（在我的开发站点上，弹出一个子菜单，其Z-index高于叠加层）。现在这就是我想要做的。点击叠加层时，菜单应该关闭，覆盖层应该隐藏。另一种我也想要的方式是，如果带有类的原始菜单被点击，则菜单应该关闭，覆盖图应该隐藏。我希望这是有道理的。

我在想，一个.toggle会起作用，因为我不能添加另一个点击功能来关闭覆盖，因为他们互相取消。但我不知道如何使用切换功能。

再次感谢！这里很大的帮助！ :)

来源

2014-01-27 user3187895

你能为它提供一个小提琴吗？ –

装修一新的代码与此：

//Add our overlay to the body and fade it in. 
    $('.jrm-menu-categories').click(function() { 
    $('#wrap_all').append('<div id="overlay-2"></div>').hide().fadeIn(300); 
    }); 

// remove overlay when overlay is clicked 
$(function(){// document.ready shorthand 
    $(document).on('click','#overlay-2',function() { 
     $('#overlay-2').fadeOut('3000',function(){//use 3000 in place of 300m 
      $(this).remove(); 
     });  
     return false; 
    }); 
});

来源

2014-01-27 06:26:38

不要在jQuery中删除，而不是使用hide()覆盖图菜单;

$(function(){ 
     $(document).on('click','#overlay-2',function() { 
      $('#overlay-2').fadeOut('3000',function(){//use 3000 in place of 300m 
       $('#overlay-2').hide(); 
      });  
      return false; 
     }); 
    });

来源

2014-01-27 06:27:27

试试看看这个代码。

$('.jrm-menu-categories').click(function() { 
$('#wrap_all').append('<div id="overlay-2">overlay</div>'); 
$('#overlay-2').fadeIn(300); 
}); 


$(document).ready(function(){ 
    $(document).on('click','#overlay-2',function() { 
     $('#overlay-2').fadeOut('3000',function() 
     { 
      $('#overlay-2').remove(); 
     });  
      return false; 
     }); 
    });

或涉及本琴：

Working Fiddle

来源

2014-01-27 06:34:04

或者你甚至可以使用$（'＃overlay-2'）。hide（）如果它适合你的需要。 –

如果覆盖应该打开多次，最好的总是在页面的底部，以保持它在那里。而不是创建和删除div，显示/隐藏会更好地做到这一点。

这里是例子：

<div id="wrap_all"> 
    <a href="#" class="jrm-menu-categories">Click Here</a> 
</div> 
<div id="overlay"></div>

CSS：

#overlay{display:none; height:100%; width:100%; position:fixed; top:0; left:0; background:rgba(0, 0, 0, 0.4); z-index:100}

JS：

$('.jrm-menu-categories').click(function(e){ 
    $('#overlay').fadeIn(300); 
    e.preventDefault(); 
}); 

$(document).on('click','#overlay',function() { 
    $(this).fadeOut('3000'); 
});

的jsfiddle：http://jsfiddle.net/M8sqe/

来源

2014-01-27 06:38:54

JQuery的点击类追加和删除叠加

回答

相关问题