0

Estou trabalhando em uma estrutura de expansão em arvóre, para integrar a outro projeto existente. Semelhante ao do windows quero que seja apenas clicável para a expansão somente a seta e não a linha toda, como ocorre nesse exemplo (copiado da internet). Quero poder selecionar a linha em questão, mas expandi-la somente quando clicar na seta. (A parte comentada /* e onde deixa os botões com essa função de expansão, no entanto como dito, acaba pegando o <li> todo, o que eu não quero)

Código em JS (tree.Js)

 export default function(data) {
    //pega a tag principa que irá receber o menu
    const tree = document.querySelector('nav#tree')

    //recebe toda a arvore de elementos
    const menu = document.createElement('ul')

    const firstLevel = data.filter(item => !item.parent)
    const getFirstLis = firstLevel.map(buildTree) // retorna novo array com li's
    console.log(getFirstLis)
    getFirstLis.forEach( li => menu.append(li)) //adicinar li's ao menu

    function buildTree(item) { 

        //primeiro elemento
        const li = document.createElement('li')
        li.innerHTML = item.name
    
        const children = data.filter(child => child.parent === item.id)

        if(children.length > 0) {

            /*adiciona um click os parents
            li.addEventListener('click', event => {
                event.stopPropagation()
                event.target.classList.toggle('open')

            })*/

            //adicionar uma classe classificadora de que tem filhos
            li.classList.add('has-children')

            //constroi os filhos
            const subMenu = document.createElement('ul')
            children.map(buildTree)
            .forEach(li => subMenu.append(li))
            li.append(subMenu)
        }
    
        //adiciona o elemento ao menu
        return li
    }
        
    //adiciona o menu no HTML
    tree.append(menu)
}

(Segunda parte em JS - main.js)

import Tree from './tree.js'

const menu =[
    { id: 1, name: "Desktops", parent: 3 },
    { id: 3, name: "Computers", parent: 8 },
    { id: 4, name: "Smartphones", parent: 6 },
    { id: 6, name: "Portables", parent: 3 },
    { id: 7, name: "Tablets", parent: 6 },
    { id: 8, name: "Eletronics", parent: null },
    { id: 18, name: "Camping",  parent: null },
    { id: 10, name: "TV", parent: 8 },
    { id: 20, name: "11 pol", parent: 7 },
    { id: 13, name: "Remotes", parent: 14 },
    { id: 14, name: "Accessories", parent: 10 },
]

Tree(menu HTML)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="vierport" content="width=device-width, initial-scale=1.0">
        <title>Tree View</title>

        <link href="https://fonts.googleapis.com/css2?family=Montserrat&dsiplay=swap" rel="stylesheet">
        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <link href="estilo.css" rel="stylesheet">

    </head>
    <body>
        <nav id="tree"></nav>

                   <!-- <ul>
                        <li class="has-children open">Eletronics
                            <ul>
                                <li>Computer
                                    <ul>
                                        <li>PC</li>
                                        <li>Notebook</li>
                                    </ul>
                                </li>
                                <li>Samartphones</li>
                            </ul>
                        </li>
                        <li>Camping</li>
                    </ul>-->    
                    
                    <script src="https://code.jquery.com/jquery-3.6.4.min.js" type="text/javascript"></script>
                    <script src="main.js" type="module"></script>
    </body>
</html>

CSS:

* {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    background: #040720;
    font-family: "Montserrat", Arial;

    color: #111010aa;

    font-size: 2rem;
}

nav#tree {
    margin-top: 45px;

    max-width: 300px;
}

nav#tree ul {
    padding-left: 16px;
}

nav#tree li {
    list-style: none;

    margin-top: 2px;
}

nav#tree li.has-children {
    cursor: pointer;
    position: relative;
}

nav#tree li.has-children:before {
    content: '\f107';
    color: #000000;
    position: absolute;
    font-family: FontAwesome;
    font-size: 26px;
    right: 15px;
  }

li > ul {
    display: none;
}

li.open > ul {
    display: block;
} 

1 Resposta 1

-2

Não é possível definir eventos num pseudo-elemento :before portanto o ideal é criar um novo elemento com a seta.

JS

if(children.length > 0) {

    const arrow = document.createElement('div')
    arrow.className = 'arrow';
    arrow.innerHTML = '<i class="fa fa-angle-down"></i>'
    li.appendChild(arrow);

    //adiciona o evento de click
    arrow.addEventListener('click', event => {
        li.classList.toggle('open')

    })

CSS

nav#tree li.has-children .arrow {
    cursor: pointer;
    color: #000000;
    position: absolute;
    font-size: 26px;
    right: 15px;
    top: 0;
}
4
  • 1
    funcinou aqui, agora so tenho que ajusta para tirar a opção "mãozinha" e a seta da li em questão, depois tentarei implementar no código o qual estou trabalhando. Muito obrigado
    – Maycon
    29/03 às 16:31
  • 1
    tirar a "mãozinha" não seria remover o cursor: pointer;? a seta do li talvez fique este css list-style-type: none; no ul 30/03 às 21:40
  • O ideal seria tirar o cursor pointer do li e manter no arrow. 31/03 às 9:33
  • e que acabei colando o trecho que me passaram no lugar errado, depois que fui ver, o código funcionou direitinho para o que eu precissava
    – Maycon
    3/04 às 14:49

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 .