[英]Jquery for making DIV visible/invisible
I am planning to show a tree structure and on clicking the tree structure I wanted a grid to be displayed.我打算显示一个树结构,然后单击树结构,我希望显示一个网格。 Since I have to show a prototype, I am thinking of using Jquery to show the following
由于我必须展示一个原型,我正在考虑使用 Jquery 来展示以下内容
Application1 (Onclick)
应用程序1(点击)
- Display a
<DIV>
with data (similar to a grid)显示带有数据的
<DIV>
(类似于网格)Application 2 (Onclick)
应用程序 2(点击)
- Collapse Application 1
Div
(invisible)折叠应用程序 1
Div
(不可见)- Application 2
DIV
(visible)应用程序 2
DIV
(可见)
so on..很快..
Is there any example that is available that I can use to simulate this?有没有可以用来模拟的示例?
Here is a real basic example: http://jsfiddle.net/YBABG/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);
});
Specifying a duration in hide will create a simple animated effect.在 hide 中指定持续时间将创建一个简单的动画效果。
JQuery's hide but doesn't remove the space and show JQuery的隐藏但不删除空格并显示
$("#id").css({ visibility: 'hidden' }) // hidden element (not remove space)
$("#id").css({ visibility: 'visible' }) // show element
Assuming the div elements already exist on the page and you are just toggling their visibility:假设页面上已经存在 div 元素,并且您只是切换它们的可见性:
$('#Application1').click(function() {
$('#Application1Div').show();
$('#Application2Div').hide();
});
$('#Application2').click(function() {
$('#Application2Div').show();
$('#Application1Div').hide();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.