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

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");
 });