用于使 DIV 可见/不可见的 Jquery答案

【问题标题】：Jquery for making DIV visible/invisible用于使 DIV 可见/不可见的 Jquery
【发布时间】：2021-02-16 22:57:32
【问题描述】：

我打算展示一个树形结构，单击树形结构时我希望显示一个网格。由于我必须展示一个原型，所以我正在考虑使用 Jquery 来展示以下内容

Application1（点击）

显示带有数据的<DIV>（类似于网格）

应用程序 2（点击）

折叠应用程序 1 Div（不可见）

应用程序 2 DIV（可见）

等等..

有没有可以用来模拟的例子？

【问题讨论】：

标签： javascript jquery toggle

【解决方案1】：

这是一个真实的基本示例：http://jsfiddle.net/YBABG/1/

<div class="parentNode a1">Application 1
    <div class="childNode">Information</div>
</div>
<div class="parentNode a2">Application 2
    <div class="childNode">Information</div>
</div>


$(".childNode").hide();

$(".parentNode").click(function(){
   $(".childNode").hide(100);
   $(this).children().show(100);
});

在 hide 中指定持续时间将创建一个简单的动画效果。

【讨论】：

【解决方案2】：

jQuery 的.show() 和.hide() 方法可以让您实现目标。

$( 'your_selector' ).click( function() {
    $( '#application_1' ).hide();
    $( '#application_2' ).show();
});

【讨论】：

【解决方案3】：

假设页面上已经存在 div 元素，而您只是切换它们的可见性：

$('#Application1').click(function() {
  $('#Application1Div').show();
  $('#Application2Div').hide();
});
$('#Application2').click(function() {
  $('#Application2Div').show();
  $('#Application1Div').hide();
});

【讨论】：

【解决方案4】：

这里

improved DEMO

玩得开心，编码愉快！

【讨论】：

我可能会在应用程序中使用这个。非常感谢！
没问题，很高兴你喜欢它。如果您有任何问题，请写在这里。
我如何尝试模拟树形结构。在您提到的演示示例中，如果我单击第一个 div，它会打开，然后如果我再次单击它，它应该会崩溃。这很容易实现吗？
非常感谢！然而，在新代码中，当我单击时，我看到 DIV 被合并在一起。是的，既然您已跟进我，我想将此标记为答案。我已经给它投票了！请告诉我。再次感谢您。

【解决方案5】：

JQuery 的隐藏但不删除空格并显示

$("#id").css({ visibility: 'hidden' }) // hidden element (not remove space)
$("#id").css({ visibility: 'visible' }) // show element

【讨论】：