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/