Javascript Jquery使DIV可见/不可见

Jquery for making DIV visible/invisible

提问by kalls

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)

• Display a <DIV>with data (similar to a grid)

Application 2 (Onclick)

• Collapse Application 1 Div(invisible)
• Application 2 DIV(visible)

应用程序 1（点击）

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

应用程序 2（点击）

• 收起应用程序 1 Div（不可见）
• 应用程序 2 DIV（可见）

so on..

很快..

Is there any example that is available that I can use to simulate this?

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

采纳答案by Kevin Bowersox

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.

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

回答by George Cummins

jQuery's .show()and .hide()methodswill allow you to accomplish your goal.

jQuery 的.show()和.hide()方法将允许您完成您的目标。

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

回答by jbabey

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

回答by Roko C. Buljan

Here

这里

improved DEMO

改进的演示

HAVE FUN & Happy coding!

玩得开心和快乐编码！