2

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

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

我试过这个：

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

请问有什么想法吗？

4

8 回答 8

4 
$('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的点击处理程序，并删除该类。

于 2013-04-26T12:17:43.133 回答
2

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

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

我认为你应该使用焦点和 模糊

因为您可以在文档或正文上添加事件，但是每次单击链接、按钮等时都会触发此事件

于 2013-04-26T12:19:19.190 回答
2

jsBin 演示

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

jsBin 演示 - 使用 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");
});
于 2013-04-26T12:23:13.170 回答
0

也许使用.toggleClass和.blur

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

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

切换类：http : //api.jquery.com/toggleClass/

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

于 2013-04-26T12:30:48.360 回答
0

并使用 focusin() focusout()

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

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

其余的部分 ：

$("div.search-bar").focusout(function() {
     $("div.search-wrap").removeClass("white");
});
于 2013-04-26T12:18:58.293 回答
0

单程

$(".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"); });
于 2013-04-26T12:20:24.940 回答
0 
$(".search-bar").click(function () {
    event.stopPropagation();
    $("div.search-wrap").addClass("white");
});

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

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

JS 小提琴链接

于 2013-04-26T12:21:33.067 回答
0 
$('div.search-bar').click(function() {
    $('div.search-wrap').addClass('white');
});
$('*:not(.search-bar)').click(function() {
    $('div.search-wrap).removeClass('white');
});
于 2013-04-26T12:22:16.463 回答