jQuery从div移除类'is-active‘，在文档单击时，也在单击触发器时
jQuery从div移除类'is-active‘，在文档单击时，也在单击触发器时
提问于 2016-08-30 07:16:52
我有一个搜索图标触发器，点击我显示一个div，但我想隐藏的div点击其他任何地方，除了div，如果div有类'is-active‘，那么在单击触发器，它应该删除'is-active’类。我有下面的代码。
$('.search-icon').parent().on('click',function() {
if($('.search-box').is('.is-active')) {
$('.search-box').removeClass('is-active');
$(document).mouseup(function (e) {
var container = $('.search-box');
if (!container.is(e.target)
&& container.has(e.target).length === 0) {
container.removeClass('is-active');
}
});
}
else {
$('.search-box').addClass('is-active');
}
});问题是，即使当我单击触发器时，它也会检查“..search box”是否有“. is -active”类，并将其移除，但跳到其他块而不是停止执行。我该怎么解决这个问题？
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-08-30 10:33:46
最后我就这样做了
$('.web-icon-container > a > .search-icon').parent().on('click',function() {
$('.web-icon-container').find('.search-box').toggleClass('is-active');
$(document).mouseup(function(e){
if(!$(e.target).is('.web-icon-container > a > .search-icon') &&
$('.web-icon-container').find('.search-box').has(e.target).length === 0){
if($('.web-icon-container').find('.search-box').hasClass('is-active')) {
$('.web-icon-container').find('.search-box').removeClass('is-active');
}
}
});
});Stack Overflow用户
发布于 2016-08-30 07:30:58
您希望在单击anywhere时隐藏div，并删除使用以下代码的类。
使用
toggleClass在单击事件上添加类和删除类
$('.search-icon').parent().on('click',function() {
$('.search-box').toggleClass('is-active');
});如果div与类
click一起生成click事件，则可以在文档的body上应用click，并取消click处理，这将将事件绑定到单个元素，并将click与除search-box以外的每个元素进行绑定。
$(document).click(function(e){
if(!$(e.target).is('.search-box, .search-box *')){
if($( ".search-box" ).hasClass( "is-active" ))
{
$('.search-box').removeClass('is-active');
}
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39221136
复制相关文章
相似问题
腾讯云开发者
