jQuery用于使DIV可见/不可见

Question

我计划展示一棵树形结构，并在单击该树形结构时显示一个网格。由于我要展示原型，所以我想使用Jquery来展示以下内容。

应用程序1（单击）

• 显示类似网格的数据的<DIV>

应用程序2（单击）

• 折叠应用程序1的DIV（不可见）
• 应用程序2的DIV（可见）

等等...

有没有可用的示例可以用来模拟这个呢？

- kalls

Answer 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中指定一个持续时间会创建一个简单的动画效果。

- Kevin Bowersox

Answer 2

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

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

- George Cummins

Answer 3

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

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

- jbabey

Answer 4

JQuery的hide方法可以隐藏元素，但不会删除空间，show方法可以显示元素。

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

- Infomaster

Answer 5

这里

改进版演示

玩得开心，愉快编程！

- Roko C. Buljan

---

我可能会在应用程序中使用这个。非常感谢！ - kalls

没问题，很高兴你喜欢它。如果你有任何问题，就在这里写下来吧。 - Roko C. Buljan

我正在尝试模拟一棵树形结构。在您提到的演示样例中，如果我点击第一个 div，它会展开，然后如果我再次点击它，它应该折叠。这是否容易实现？ - kalls

非常感谢！然而，在新代码中，当我点击时，我看到DIV被合并在一起。是的，既然你跟进了我，我想把这个标记为答案。我已经投过票了！请告诉我。再次感谢。 - kalls