目标文档的其余部分，停止滚动和toggleClass

Question

我正在使用下拉菜单，我正在使用jQuery来操作DOM。到目前为止，我可以将菜单切换到视图之外。每当菜单在视图中时，我将 CSS 位置属性设置为已修复，其中顶部，左侧和底部属性设置为零，其宽度设置为 90％，如下所示

.menu-container{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:90%
}

我的问题是双重的

1. 当我在菜单上滚动时（例如，在测试时），其余部分 文档也会滚动。我想限制滚动 每当菜单在视图中时菜单容器。

   $('.menu-container').hasClass('menu-open'){
       //rest of body doesn't scroll
   }
   

2. 其次，由于菜单宽度设置为90％，我想切换 只要在菜单容器外点击，菜单就会无法显示。

    $('rest of body').on('click', function(){
       //Toggle menu out of view
   });
   

虽然我正在寻找一个jQuery修复程序，但任何其他实现，包括使用原始JavaScript的直接操作都将受到赞赏。

感谢。

Answer 1

首先我建议让你的容器全屏。既然您说已经设置了overflow: scroll，那么其他更改将是

.menu-container{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height: 100%;
}

第二，你可以做到

$('body').on('click', function(){
    if(!$(this).closest('.menu-container').length){
        //Toggle menu out of view
    }

});

Answer 2

文档将始终在滚动操作期间滚动，除非鼠标位于本身已滚动的元素上，即它具有overflow: scroll或overflow: auto且固定高度

考虑到这一点，修改菜单

overflow: scroll;
height: 300px; /* for example */

接下来，如何在模糊时关闭它。这里的逻辑是你想要在不在菜单中的任何点击上调用闭包 - 换句话说，点击不应该在菜单本身或其任何子/后代元素上。以下是：

$('body').on('click', '*', function() {
    if (!$(this).closest('.menu-container').length) $('.menu-container').hide();
});

由于closest()会根据传递的选择器检查匹配的元素及其父/祖先，因此这种检查是一个不错的选择。