Question

我有一个通知小部件，当我点击触发器时会出现，当我点击两次触发器或点击外部元素的其他位置时，它会消失。
怎么做？

$('.swt').click(function(){
  $('.swt').removeClass('active');
  $('.ctx').removeClass('ctx-active');
  $(this).addClass('active');
});

var ccd = 1;

$('#add').click(function(){
  $('#ad').addClass('ctx-active');
});


$('#msg').click(function(){
  $('#ms').addClass('ctx-active');
});

$('#notif').click(function(){
  $('#no').addClass('ctx-active');
});

$('#sst').click(function(){
  $('#show div').removeClass('ctx-active');
});

demo code

Answer 1

只需使用toggleClass更改removeClass和addClass即可。这是Documentation on toggleClass。

这是一个固定的JSFiddle。

对于“在外部点击时关闭”，您必须添加一个宽度和高度均为div的透明#tooltip，然后添加click eventListener。

Answer 2

您可以使用dblclick双击事件处理程序，在事件处理程序中，您可以像这样添加检查：

$(document).dblclick(function(e) {
  if (e.target.id != "show" && !$(e.target).parents("#show").size()) {
     //remove class
  }
});

有关实施的信息，请参阅此处：JSFiddle

Answer 3

感谢您的回答最后，我找到了所有问题的结果我只是使用sibling（）和toggleclass（）来解决问题这是更新演示。

demo code

$('#add').click(function(){
  $('#ms').removeClass('ctx-active');
  $('#no').removeClass('ctx-active');
  $('#ad').toggleClass('ctx-active');
  $('#add').siblings().removeClass('active');
  $(this).toggleClass('active');
});


$('#msg').click(function(){
  $('#no').removeClass('ctx-active');
  $('#ad').removeClass('ctx-active');
  $('#ms').toggleClass('ctx-active');
  $('#msg').siblings().removeClass('active');
  $(this).toggleClass('active');
});

$('#notif').click(function(){
  $('#ms').removeClass('ctx-active');
  $('#ad').removeClass('ctx-active');
  $('#no').toggleClass('ctx-active');
  $('#notif').siblings().removeClass('active');
  $(this).toggleClass('active');
});

$('#sst').click(function(){
  $('#show div').removeClass('ctx-active');
});

$('#ss').click(function(){
  $('.ctx').removeClass('ctx-active');
  $('.swt').removeClass('active');
});`

如何在触发器点击两次或jquery中的元素外部时关闭通知

3 个答案: