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;
}