Estou a tentar criar/adaptar uma tree list
, no entanto não estou a conseguir expandir a minha lista ao clicar sobre uma label.
Lista:
<div id="listContainer">
<ul id="expList">
<li style="">
<label style="margin-top: 50px;border-style: solid; border-width: 1px; border-color: #7C7C7C; background-color:#E0E0E0">
Item A
</label>
<ul>
<li>
itens lista A
</li>
</ul>
</li>
</ul>
A partida o erro parte da minha função js para expandir a lista:
function prepareList() {
$('#expList').find('li:has(ul)')
.click(function (event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
...
...
}
Já tentei fazer find da label na expList
só para testar e não consegui resolver a questão:
$('#expList').find('label')
.click(function (event) {
...
...
}
Segue o código completo: jsfiddle
PS.- Se clicarem fora da lista, a mesma expande
if (this == event.target) {
o que pretendes com ela? (só para perceber melhor o que procuras)this
e oevent.target
nem sempre são o mesmo elemento. E isso gera confusão a muita gente, daí a pergunta é util...event.target
tinha o valor algo como "cliquei na li", e o meuthis
faz referência ao elemento. É isso que estás a tentar dizer?$('#expList').find('li:has(ul)')
só selecionali
's. E já agora podes usar$('#expList li:has(ul)')
somente.