Jquery 单击屏幕上的任意位置以删除类

我有几个下拉菜单，当按钮被选中时，我在其中添加了一个add和remove类

我想做一个小功能，这样当用户点击屏幕上的任何地方的类被删除

$('.btn').click(function(){
    var $pane = $(this).closest('.btn-container').find('.pane');
    if ($pane.hasClass('inactive')) {
        $('.btn-container .pane').addClass('inactive');
        $pane.removeClass('inactive');
    } else {
        $pane.addClass('inactive');
    }
});

---

可以将单击处理程序添加到文档对象以添加非活动类

$（'.btn'）。单击（函数（）{
var$pane=$（this）.closest（'.btn container'）。find（'.pane'））
$pane.toggleClass（'inactive'）；
if（！$pane.hasClass（'inactive'））{
$（'.btn container.pane:not（.inactive））.not（$pane.addClass（'inactive'）；
}
});
$（文档）。单击（函数（e）{
如果（！$（e.target）.最近（'.btn'）.长度）{
$（'.btn container.pane:not（.inactive.）.addClass（'inactive'）；
}
})

.inactive{
可见性：隐藏；
}

在这里

您可以简化逻辑，将单击事件绑定到

文档

，并使用以下逻辑切换

非活动

类：

$（文档）。单击（函数（e）{
var$pane=$（e.target）.closest（'.btn container'）.find（'.pane'）；
$pane.add（$（'.pane:not（.inactive））.toggleClass（'inactive'）；
});
.inactive{
可见性：隐藏；
}

在这里