Question

我有一个搜索图标触发器，点击后我会显示一个div，但我想隐藏div除了div之外的任何其他地方，以及div是否有类＆＃39; is-active＆＃39;然后点击触发器，它应该删除“活跃”＆＃39;类。我有以下代码。

$('.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');
}
});

问题是，即使我点击触发器，它也会检查＆＃39; .search-box＆＃39;有一个班级.is-active＆＃39;并删除它但跳转到else块而不是停止执行。我该如何解决这个问题？

Answer 1

您想要点击任意位置隐藏div并删除该类 - 使用此代码

使用toggleClass添加类并在点击事件上删除类

$('.search-icon').parent().on('click',function() {
    $('.search-box').toggleClass('is-active');
});

您可以在click文档上应用body，如果click事件由div click生成search-box事件，则取消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'); } } });
之外的每个元素的绑定

String actual=Fullactual.substring(4, Fullactual.length());

Answer 2

我最终这样做了

$('.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');
    }
  }
});
});

jQuery删除类＆＃39; is-active＆＃39;来自div的文档点击，但也点击了触发器

2 个答案: