针对文档的其余部分，停止滚动和toggleClass

Question

我正在处理下拉菜单，并使用jQuery操作DOM。到目前为止，我可以切换菜单进入和退出视野。每当菜单出现时，我就将它的CSS位置属性设置为固定，顶部、左和底部属性设置为零，其宽度设置为90%，如下所示

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

我的问题是双重的。

1. 当我在菜单上滚动时(例如，测试时)，文档的其余部分也会滚动。每当看到菜单时，我想将滚动限制在菜单容器上。 $(‘.菜单-容器’).hasClass(‘菜单-打开’){//身体的其他部分不滚动}
2. 第二，由于菜单宽度设置为90%，所以每当有人单击菜单容器外时，我都会将菜单切换到视图之外。 $('rest of body').on('click'，function(){ //Toggle菜单退出视图})；

虽然我正在寻找一个jQuery修复，任何其他实现，包括使用原始JavaScript的直接操作，都将不胜感激。

谢谢。

Answer 1

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

考虑到这一点，请修改菜单

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

接下来，如何在模糊时关闭它。这里的逻辑是，您希望在菜单之外的任何单击上调用闭包--换句话说，单击不应该在菜单本身或它的任何子/后代元素上。下面是操作步骤：

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

由于closest()根据传递的选择器检查匹配的元素及其父/祖先，所以这是进行这种检查的一个很好的选择。

Answer 2

对于第一个，我建议让你的容器全屏。既然您说您已经设置了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
    }

});