Question

我有两个标签d1和d2（隐藏），如果我单击d1的文本框（t1），则d2必须可见，然后如果我单击页面中除d2之外的任何位置，则d2必须再次隐藏如果我单击d2中的任何位置，则d2必须仅可见。 d2包含许多子元素。

我已经尝试过使d2可见的代码，但是如果我们在d2之外单击，我将无法再次使它不可见。

$("#t1").click(function () {
            $("#d2").removeClass("hidden");
});

我有两个标签d1和d2（隐藏），如果我单击d1的文本框（t1），则d2必须可见，然后如果我单击页面中除textbox（t1）和d2以外的任何位置， d2必须再次隐藏，并且如果我单击d2中的任意位置，则d2必须仅可见。

Answer 1

希望这就是您想要的，谢谢

$('#txt_Cartons1').click(function(e){      // click on text t1
         $('#hidden_div1').removeClass('hidden')
})

$(document).click(function(e){   // Click anywhere except t1 and d2
    if( !$(e.target).closest("#hidden_div1").length > 0 && ! $(e.target).closest("#txt_Cartons1").length > 0) {
         $('#hidden_div1').addClass('hidden')
    }
   
});

.hidden
{
display:none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row" id="outer_div"> // First Div d1 
<input type="text" id="txt_Cartons1" class="form-control value-control floating-label-control" data-isdynamic="false" data-placeholder="Cartons" data-	label="Cartons" onfocus="SearchItems.init()" onblur="SearchItems.init()" /> 
</div> 

<div id="hidden_div1" class="hidden"> //Second Div d2 <Some Tags are there> </div>

Answer 2

$("#t1").click(function () {
  $("#d2").removeClass("hidden");
});

 $('body').on('click', function(a_event) {
   if (!$('#d2').is(a_event.target) && !$('#t1').is(a_event.target)) {
    $("#d2").addClass("hidden");
   }
 })

Answer 3

解决方案

在按钮上单击（t1），可以看到div（d2）

$("#t1").on("click",function () {
        $("#d2").css("display","block");   
 });

在页面上单击d2需要隐藏

$('body').on('click', function() {   
     $("#d2").css("display","none");
 });

如何使Div标签可见和不可见？

3 个答案: