Javascript 幻灯片菜单-单击div以关闭不处理特定div

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

（a） 这个很好用。 （b） 这就是我的问题所在。我让菜单在菜单中的链接和十字图标上关闭

我无法在附加的div上关闭它

这就是jQuery（无论如何，它肯定会更平滑）

$（“.menu”）。单击（函数（）{
$（'.slide menu'）.slideDown（）；
if（$（'#container'）.hasClass（'with-overlay'））{
$（'.bg overlay'）.show（）；
}
否则{
$（'#container'）.prepend（'.addClass（'with-overlay'）；
}
});
$（“.close触发器”）。单击（函数（）{
$（'.slide menu'）.slideUp（）；
$（'.bg overlay'）.hide（）；
});
$（“.bg覆盖”）。单击（函数（）{
$（'.slide menu'）.slideUp（）；
$（'.bg overlay'）.hide（）；
});

我错过了什么？

您忘记了动态创建覆盖，因此需要添加事件侦听器

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);

函数隐藏（）{
$（'.slide menu'）.slideUp（）；
$（'.bg overlay'）.hide（）；
}
$（“.menu”）。单击（函数（）{
$（'.slide menu'）.slideDown（）；
if（$（'#container'）.hasClass（'with-overlay'））{
$（'.bg overlay'）.show（）；
}
否则{
$bgOverlay=$（''）；
$bgOverlay。单击（隐藏）；
$（“#容器”）
.append（$bgpoverlay）
.addClass（“带覆盖”）；
}
});
$（“.close触发器”）。单击（隐藏）；

注册单击

处理程序时，DOM中不存在覆盖。您可以将事件处理程序添加到动态创建的元素中，方法是使用

上已存在的基本容器

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

---

首先，我会让bg overlay HTML始终显示在页面上，并切换一个

隐藏的
类，而不是一直注入它。在大多数情况下（显然不是所有情况），建议避免像JS中那样生成HTML；特别是考虑到它已经在页面上完全可行。其次，看看CSS转换，它们支持回到IE10（只是在旧浏览器中不会转换），并且可能比JS更平滑。
$(document).on('click', '.bg-overlay', function () {
    $('.slide-menu').slideUp();
    $('.bg-overlay').hide();
});