jQuery: исчезновение и появление дочернего блока при клике
<!DOCTYPE HTML><html dir="ltr" lang="ru-ru">
<head>
<meta charset="utf-8">
<title>Урок cript</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready( function(){
$(".da-ne").on("click", function() {
$(this).find('*').toggle('slow');
});
/*
$(".da-ne").on("click", function() {
$(this).children('*').toggle('slow');
});
//Показывать скрывать соседа
$('.div_1').click(function(){
$(this).parent().next('.div_2').animate({opacity: 'toggle', height: 'toggle'}, 500);
});
*/
});
</script>
</head>
<body>
<ul>
<li class="da-ne">Верхний уровень
<ul>
<li>Нижний уровень</li>
<li>Нижний уровень</li>
</ul>
</li>
<li class="da-ne">Верхний уровень
<ul>
<li>Нижний уровень</li>
<li>Нижний уровень</li>
</ul>
</li>
</ul>
</body></html>
Или так:
$('.da-ne').click(function(){
$(this).children().animate({opacity: 'toggle', height: 'toggle'}, 500);
});
Если хочешь чтобы не все дочерние (не потомки) блоки исчезали, а только нужные - укажи класс блока
$('.kn').click(function(){
$(this).children('.show').animate({opacity: 'toggle', height: 'toggle'}, 500);
});
А вот как это работает:
- Верхний уровень
- Нижний уровень
- Нижний уровень
- Верхний уровень
- Нижний уровень
- Нижний уровень
