Jquery для того, чтобы сделать DIV видимым / невидимым - PullRequest
11 голосов
/ 08 июля 2011

Я планирую показать древовидную структуру, и при нажатии на древовидную структуру я хотел, чтобы сетка отображалась.Поскольку мне нужно показать прототип, я подумываю использовать Jquery для отображения следующего

Application1 (Onclick)

  • Отображение <DIV> с данными (аналогичносетка)

Приложение 2 (Onclick)

  • Свернуть приложение 1 Div (невидимо)
  • Приложение 2 DIV (видимо)

и т. Д.

Есть ли какой-нибудь пример, который я могу использовать для симуляции этого?

Ответы [ 4 ]

11 голосов
/ 08 июля 2011

Вот реальный базовый пример: 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);
});

Задание длительности в скрытии создаст простой анимированный эффект.

2 голосов
/ 08 июля 2011
Методы

jQuery .show() и .hide() позволят вам достичь цели.

$( 'your_selector' ).click( function() {
    $( '#application_1' ).hide();
    $( '#application_2' ).show();
});
1 голос
/ 08 июля 2011

Здесь

улучшено DEMO

ИМЕЙТЕ УДОВОЛЬСТВИЕ И Удачного кодирования!

1 голос
/ 08 июля 2011

Предполагая, что элементы div уже существуют на странице, и вы просто переключаете их видимость:

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