Question

嗨，这是我的HTML代码：

<span id="transa_noua">Adauga transa noua +</span>
<div id="ad_transa" class="ad_transa2" style="display: none;overflow:auto;">
    <div style="float: left; margin-right:20px;">
        <label for="input_val_transa">Transa de plata</label>
        <input id="nume_transa" type="text"/>
    </div>
</div>

这是我的javascript函数：

$("#transa_noua").click(function(e){
    $("#ad_transa").show();
    e.stopPropagation();
});
$("body").click(function(e){
  if (e.target.className == "ad_transa"){
     alert("do't hide");  
  }else{    
        $('.ad_transa').css("display","none");
  }
});

所以，问题是我不想隐藏所有ad_transa2类元素。例如，当我点击输入时，包含ad_transa2类的所有div消失了。我怎样才能做到这一点？

Answer 1

尝试此解决方案。

$("#transa_noua").click(function(){
    $("#ad_transa").show();
});
$(document).on('click', function(){
    $('#ad_transa').hide();
});
$('#ad_transa, #transa_noua').on('click', function(e){
    e.stopPropagation();
});

Fiddle Demo

Answer 2

另一种有效的方法：

$(document).click(function(event) {
  if (!$(event.target).closest('#element-want-hidden').length) {
    if ($('#element-want-hidden').is(':visible')) {
      $('#element-want-hidden').hide();
    }
  }
});

CoffeeScript的：

$(document).click (event) ->
    if !$(event.target).closest('#element-want-hidden').length
      if $('#element-want-hidden').is(':visible')
        $('#element-want-hidden').hide()
    return

它会查找最接近的元素，它可以自己查找，并允许您单击页面上的任何位置，元素将再次隐藏。

如何通过jQuery中的body点击隐藏div元素？

2 个答案: