3

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

9
  • Qual é a ideia desta linha? if (this == event.target) { o que pretendes com ela? (só para perceber melhor o que procuras)
    – Sergio
    Commented 19/09/2014 às 9:11
  • @Sergio, o problema é dessa linha (se a tirar funciona como quero). Vou apagar a pergunta, pois a partida não ajudará ninguém no futuro. Obrigado pela ajuda ;) Commented 19/09/2014 às 9:15
  • Não apagues. O problema nessa linha é que o this e o event.target nem sempre são o mesmo elemento. E isso gera confusão a muita gente, daí a pergunta é util...
    – Sergio
    Commented 19/09/2014 às 9:16
  • Ah já estou a entender o meu erro. A partida o meu event.target tinha o valor algo como "cliquei na li", e o meu this faz referência ao elemento. É isso que estás a tentar dizer? Commented 19/09/2014 às 9:19
  • 1
    Nesse caso essa linha não é necessária pois o $('#expList').find('li:has(ul)') só seleciona li's. E já agora podes usar $('#expList li:has(ul)') somente.
    – Sergio
    Commented 19/09/2014 às 9:27

1 Resposta 1

3

Existe uma diferença entre usar o this e o event.target dentro de um oscultador de evento.

Se o oscultador esiver amarrado a um elemento sem descendentes, então this == event.target. Mas no caso de o evento estar associado/amarrado a um parente então o event.target será o elemento descendente do inicial, aquele que recebeu o click. O evento vai depois subir no DOM (bubbling) até chegar ao event handler que é então ativado tendo como this o elemento que está no seletor.

No seu caso o this vai sempre ser um li, como pedido pelo seletor li:has(ul), e o event.target o <label>. Pode haver casos em que o event.target == li. No caso de ter um padding grande e o utilizador clicar fora dos limites do label e ainda dentro do li. Mas em qualquer dos casos o this será-lhe atribuído o li em questão.

Olhando para este exemplo com cor de fundo no li dá para perceber quando o this == li

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .