Question

我有一个div，点击后会显示contact us表单。也就是说，切换它显示和隐藏。如何在点击文档的其他部分时隐藏它。

代码在

之下

 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>

Answer 1

更新：插入快速演示。

$(document).mouseup(function (e)
{
    var container = $("#quick_cct_form");

    if (!container.is(e.target) && container.has(e.target).length === 0)
    {
        container.hide();
        $("#fixed_cct_us").css("right","-40px");
    }
});

div {
  
  width: 500px;
  height: 150px;
  margin: 30px auto;
}

form {
  background: red; 
  width: 100%;
  height: 100%;
  color: white;
  padding: 10px;
}

input {
  margin: 20px;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<div>
<form id="quick_cct_form">
  Edit: <input type="text" placeholder="CustomerId" />
</form>  
</div>

The Snippet：

$(document).mouseup(function (e)
{
    var container = $("YOUR_SELECTOR");

    if (!container.is(e.target) && container.has(e.target).length === 0)
    {
        container.hide();
    }
});

Answer 2

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

下面的更新代码

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

demo

如何隐藏/显示切换并隐藏在div外部点击

2 个答案: