Javascript 未单击div时删除类（onclick not true）

我正在编写一个小的JQuery/JS代码，以便在我的应用程序中创建一些交互。我正在使用一个div，如果我单击它，它将是不同的颜色。然后，如果我再次单击它（它检查div的类是否具有提供颜色的类），它将弹出一个模态。但是，现在，我想删除颜色，如果我点击除div以外的任何东西。因此，div是灰色的，当我点击它时，它将变为黄色，而在我点击其他东西后，它必须再次变为灰色。我想，如果div得到类

“clicked”

，并且在div上的单击不是真的，它将删除类

“clicked”

我的代码：

$(".progressDefault").click(function(){
  if ($( ".progressDefault" ).hasClass( "clicked" )) {
    $('#myModal').modal('show');
  }
  if ($ (".progressDefault").hasClass("clicked") && $(".progressDefault").onclick == false ) {
    $('.progressDefault').removeClass('clicked');
  }
  $(this).toggleClass('clicked');
});

HTML分区

<div class="progress-bar progressDefault" role="progressbar" aria-valuenow="25"` aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
  <span class="sr-only">25%</span>
</div>

25%

要删除

单击的

类，您需要在文档上附加单击处理程序并检查

e.target

$（.progressDefault”）。单击（函数（）{
if（$（this）.hasClass（“单击”））{
警报（“显示模式”）；
}否则{
$（this.addClass（'clicked'）；
}
});
$（文档）。单击（函数（e）{
if（！$（'.progressDefault'）.is（e.target）&&（'.progressDefault'）.has（e.target）.length==0）{//如果div既不是目标也不是它的后代
$（'.progressDefault'）.removeClass（'clicked'）；
}
});
.progressDefault{
边框：1px纯黑；
宽度：50px；
高度：50px；
填充：10px；
背景：灰色；
}
.点击{
背景：绿色；
}

测试
删除
点击的
类，您需要在文档上附加点击处理程序并检查
e.target


$（.progressDefault”）。单击（函数（）{
if（$（this）.hasClass（“单击”））{
警报（“显示模式”）；
}否则{
$（this.addClass（'clicked'）；
}
});
$（文档）。单击（函数（e）{
if（！$（'.progressDefault'）.is（e.target）&&（'.progressDefault'）.has（e.target）.length==0）{//如果div既不是目标也不是它的后代
$（'.progressDefault'）.removeClass（'clicked'）；
}
});
.progressDefault{
边框：1px纯黑；
宽度：50px；
高度：50px；
填充：10px；
背景：灰色；
}
.点击{
背景：绿色；
}

测试
使用此代码检查所需文档外部的单击

$(document).mouseup(function (e) {
    var container = $(".progressDefault");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
    /* if the target of the click isn't the container && nor a descendant of the container */
        $('.progressDefault').removeClass('clicked');
    }
});

使用此代码检查所需文档外部的单击

$(document).mouseup(function (e) {
    var container = $(".progressDefault");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
    /* if the target of the click isn't the container && nor a descendant of the container */
        $('.progressDefault').removeClass('clicked');
    }
});

请添加相关的HTML代码。完成，这是特定的div请添加相关的HTML代码。完成，这是特定的div