Question

我正在尝试构建一个幻灯片菜单，其中（a）打开，在页面的其余部分放置白色褪色的覆盖图;（b）当我单击菜单中的链接或单击白色覆盖图的任何位置时关闭

（a）这很好。（b）这是我遇到问题的地方。我在菜单中的链接和十字图标上关闭菜单。

我没有让它关闭附加的div。

这就是jQuery（肯定会以某种方式更流畅）。

$(".menu").click( function (){
  $('.slide-menu').slideDown();
  if ( $('#container').hasClass('with-overlay') ) {
    $('.bg-overlay').show();
  }
  else {
    $('#container').prepend('<div class="bg-overlay"></div>').addClass('with-overlay');  
  }
});

$(".close-trigger").click( function (){
  $('.slide-menu').slideUp();
  $('.bg-overlay').hide();
});

$(".bg-overlay").click( function (){
  $('.slide-menu').slideUp();
  $('.bg-overlay').hide();
});

我错过了什么？

Answer 1

http://plnkr.co/edit/NtGGqpC41ycD2x7FL8wX?p=preview

您忘记了动态创建叠加层，因此您需要添加事件监听器

function hide(){
    $('.slide-menu').slideUp();
    $('.bg-overlay').hide();
}

$(".menu").click( function (){
  $('.slide-menu').slideDown();
  if ( $('#container').hasClass('with-overlay') ) {
      $('.bg-overlay').show();
  }
  else {
    $bgOverlay = $('<div class="bg-overlay"></div>');
    $bgOverlay.click(hide);
    $('#container')
    .append( $bgOverlay )
    .addClass('with-overlay');
  }
});

$(".close-trigger").click(hide);

Answer 2

注册点击 <script type="text/javascript"> window.onload = function abc() { var copyto = document.querySelectorAll('.img-container-alt'); var copy = document.querySelectorAll('.album-img'); for (var i = 0; i < copyto.length; i++) { var url = copy[i].getAttribute("src"); copyto[i].href = url; } }时，您的叠加层在DOM中不存在。您可以使用handler和已存在的基本容器将事件处理程序添加到动态创建的元素中。

on

幻灯片菜单 - 单击div关闭不在某个div上工作

2 个答案: