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

您只需要在焦点状态下更改样式，并在完成编辑后恢复默认状态

您不需要使用点击事件 - 这是不合适的方式。

我认为你应该使用 focus 和 blur

因为您可以在docuemnt或body上添加事件，但每次点击链接，按钮等时都会触发此事件

Answer 3

<强> 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 4

使用focusin（）focusout（）

当你的输入有它添加课程，当他失去它时，删除课程...你怎么看？

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

其余的：

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

Answer 5

单程

$(".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 6

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

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

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

JS FIDDLE LINK

Answer 7

$('div.search-bar').click(function() {
    $('div.search-wrap').addClass('white');
});
$('*:not(.search-bar)').click(function() {
    $('div.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/

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

8 个答案: