DESAFIO (obrigado <a href=” https://twitter.com/pgerochi”> @pgerochi </a>)
Faça uma lista de 4 itens. Quando você clica em um item, outra lista desliza para baixo. Quando você clica em um item da lista que deslizou para baixo, o texto do item da lista original mudará dependendo do que você clicou na lista deslizante. Ugh – não consigo explicar isso corretamente em palavras. Basta verificar a demonstração! 🙂
HTML
<div class="c">
<ul>
<li><span>one</span>
<ul>
<li>one-one</li>
<li>one-two</li>
<li>one-three</li>
<li>one-four</li>
</ul>
</li>
<li><span>two</span>
<ul>
<li>two-one</li>
<li>two-two</li>
<li>two-three</li>
<li>two-four</li>
</ul>
</li>
<li><span>three</span>
<ul>
<li>three-one</li>
<li>three-two</li>
<li>three-three</li>
<li>three-four</li>
</ul>
</li>
<li><span>four</span>
<ul>
<li>four-one</li>
<li>four-two</li>
<li>four-three</li>
<li>four-four</li>
</ul>
</li>
</ul>
</div>CSS
.c {
position: relative;
width: 100%;
top: 20px;
left: 20px;
}
ul {
font-family: arial;
}
li {
cursor: pointer;
}
ul ul {
display: none;
}
ul > li {
color: blue;
}
ul li ul li {
color: orange;
padding-left: 10px;
}
jQuery
$(document).ready(function() {
$('ul li').click(function(e) {
$('ul li ul').slideUp();
$(this).children('ul').slideDown();
});
$('ul li ul li').click(function(e) {
var newText = $(this).text();
$(this).parents('li').find('span').text(newText);
e.stopPropagation();
});
});