jQuery:单击一个元素并将类添加到 div，单击离开并删除类

Question

我已经研究了这个问题，我可以找到一种解决方案，用于向我单击的 div 添加/删除类，但不能完全是单独的 div，例如

单击带有 .search-bar 类的输入...，它会向名为 .search-wrap 的 div 添加一个类...单击 page/off 元素上的其他任何位置，它会删除添加到 .search- 的类换行。

我已经尝试过这个:

$("div.search-bar").click(function(){
    $("div.search-wrap").addClass("white");
});

请问有什么想法吗？

Answer 1

$('html').click(function() {
     $("div.search-wrap").removeClass("white");
});

$("div.search-bar").click(function(event){
     event.stopPropagation();
     $("div.search-wrap").addClass("white");
});

如果单击 div.search-bar，则会调用 addClass，但该事件不会冒泡到 body。页面上的任何其他点击都将调用 html 的点击处理程序，并删除该类。