Javascript 如何在切换时隐藏/显示以及在div外部单击时隐藏

我有一个div，单击它时会显示一个

联系我们

表单。 也就是说，在“切换”上，它会显示和隐藏。如何使其在文档的其他部分单击时隐藏

代码如下

 function showCctFrm(){
    var frmWidth = '-40';

    $("#quick_cct_form").toggle(function(e){
        if($("#quick_cct_form").is(":visible")){ frmWidth = "200"; }
        if($("#quick_cct_form").is(":hidden")){ frmWidth = "-40"; }

        $("#fixed_cct_us").css("right",frmWidth+"px");
        //e.stopPropagation();
    });
    //alert(frmWidth);
}

我尝试在单击的外部隐藏此内容：

 $(document).click(function(e) {
  if(e.target.id != 'fixed_cct_us') {
    $("#quick_cct_form").hide();
    $("#fixed_cct_us").css("right","-40px");
  }
});

其HTML div如下所示

<div id="fixed_cct_us" style="right: 240px;">
    <a title="connect" href="javascript: showCctFrm();">connect &nbsp;</a>
</div>

---

更新：插入快速演示

$（文档）.mouseup（函数（e）
{
var容器=$（“#快速#cct_表单”）；
如果（！container.is（e.target）&&container.has（e.target）.length==0）
{
container.hide（）；
$（“#fixed#cct_us”）.css（右），“-40px”）；
}
});
div{
宽度：500px；
高度：150像素；
保证金：30像素自动；
}
形式{
背景：红色；
宽度：100%；
身高：100%；
颜色：白色；
填充：10px；
}
输入{
利润率：20px；
}

编辑：

更新了下面的代码

$(document).on('mouseup', function (e) {
      $("#quick_cct_form").hide();
      $("#fixed_cct_us").css("right","-40px");
      e.stopPropagation();
    });  

从外部单击时未隐藏：（外部何处？如果正在单击正文，且目标项不是表单，则表单应隐藏。您正在单击的位置？现在；代码$（“$”（“$”（““$”）（““$”）快速cct_表单”）。切换（函数（e）{If（$（“$”）（“：可见”）{frmWidth=“200”}If($(“#quick_cct_form”）.is（“：hidden”）{frmWidth=“-40”}$（“#fixed_cct_us”）.css（“right”，frmWidth+“px”）//e.stopPropagation（））；不起作用；切换只能打开表单，不能关闭表单
$(document).on('mouseup', function (e) {
      $("#quick_cct_form").hide();
      $("#fixed_cct_us").css("right","-40px");
      e.stopPropagation();
    });