Question

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

Application1（Onclick）


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


申请2（Onclick）


折叠申请1 Div（不可见）

申请2 DIV（可见）

等......

是否有可用于模拟此示例的示例？

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

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

Answer 2

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

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

Answer 3

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

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

Answer 4

下面

improved DEMO

有乐趣＆amp;快乐的编码！

Answer 5

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

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

使DIV可见/不可见的Jquery

5 个答案:

improved DEMO