jQuery：单击一个元素，并添加一个类到一个div，点击它，并删除类

Question

我研究这个问题，我可以找到一个解决方案添加/删除一个类的div我点击，但不是一个单独的div，例如

单击.search-bar ....类中的输入，并向一个名为.search-wrap的div添加一个类...单击页面上其他任何位置/ 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的点击处理程序，并删除类。

Answer 2

而且使用的focusIn（）事件的内容（）

当您输入有它添加的类别，而当他失去它，删除类...你怎么想？

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

休息：

$("div.search-bar").focusout(function() { 
    $("div.search-wrap").removeClass("white"); 
}); 

Answer 3

你需要改变风格，仅聚焦状态，完成编辑后恢复默认状态

你不需要使用click事件 - 这是不恰当的方式。

我认为你应该使用focus和blur

Ofcause你可以在每次上docuemnt或正文中添加事件，但这个事件会触发当你点击链接，按钮等

Answer 4

单程

$(".search-bar").on("click", function(e) { $(".search-wrap").addClass("white"); }); 
$(".search-wrap").siblings().on("click", function() { $(".search-wrap").removeClass("white"); }); 
$(".search-wrap").siblings().parents().on("click", function() { $(".search-wrap").removeClass("white"); }); 

另一种方式

$(".search-bar").on("click", function(e) { $(".search-wrap").addClass("white"); }); 
$("body, body *").not(".search-wrap, .search-wrap *").on("click", function() { $(".search-wrap").removeClass("white"); }); 

都与自己的优点和缺点，即响应较慢的系统和可能的HTML布局

的速度，如果你能使用输入在div，最好的办法是：

$(".search-bar input").on("focus", function(e) { $(".search-wrap").addClass("white"); }) 
.on("blur", function(e) { $(".search-wrap").removeClass("white"); }); 

Answer 5

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

$(document).on("click", function() { 

    $("div.search-wrap").removeClass("white"); 
}); 

JS FIDDLE LINK

Answer 6

$('div.search-bar').click(function() { 
    $('div.search-wrap').addClass('white'); 
}); 
$('*:not(.search-bar)').click(function() { 
    $('div.search-wrap).removeClass('white'); 
}); 

Answer 7

jsBin demo

$(".search-bar").on('focus blur', function(e){ 
    $(".search-wrap").toggleClass("white"); 
}); 

jsBin demo - Using DIV

$(".search-bar").on('click', function(e){ 
    e.stopPropagation(); 
    $(".search-wrap").addClass("white"); 
}); 
$(document).on('click', function(e){ 
    if(e.target.className!="search-bar") 
    $(".search-wrap").removeClass("white"); 
}); 

Answer 8

也许使用.toggleClass和.blur

$(document).ready(function(){ 
    $('.search-bar').blur(function(){ 
     $('.search-wrap').toggleClass('blue','red'); 
    }); 
}); 

我在这里做一个小提琴：http://jsfiddle.net/HqcG2/

toggleClass：http://api.jquery.com/toggleClass/

模糊：http://api.jquery.com/blur/