用于在树结构中显示扩展按钮的列表扩展和CSS的问题 [英] Issues with the list expansion and CSS for showing expansion button in tree structure
本文介绍了用于在树结构中显示扩展按钮的列表扩展和CSS的问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
以下javaScript代码正在转换树结构中的输入路径。这工作正常。但是我有一个问题。
当树太大的时候如果我要扩展底部列表项,那么每次点击+之后按钮将我带到了网页的顶部,而不是专注于我扩展的子项目。
我尝试了什么:
The below javaScript code is converting the input paths in tree structure. That is working fine. But I have one issue in that.
When the tree is too big that time if I am going to expand the bottom list items, after every click on the "+" button is taking me to the top of the web page rather than focusing on the child items that I have expanded.
What I have tried:
<pre lang="Javascript">// Converts your input data into an object:
var convert = function(input) {
var output = {};
// iterate through each path in the input array:
input.forEach(function(path) {
var folders = path.split("\\"); // convert this path into an array of folder names
// "parent" serves as a marker in the output object pointing to the current folder
var parent = output; // the topmost folder will be a child of the output root
folders.forEach(function(f) {
parent[f] = parent[f] || {}; // add a folder object if there isn't one already
parent = parent[f]; // the next part of the path will be a child of this part
});
});
return (output);
}
// Draws nested lists for the folder structure
var drawFolders = function(input) {
var output = "<ul class='tree'>";
var counter = 0;
Object.keys(input).forEach(function(k) {
if (((k.length) > 0) && Object.keys(input[k]).length) {
output += "<li><a href='#'>" + k; // draw this folder
} else {
output += "<li>" + k; // draw this folder
}
//output += ""; // draw this folder
if (Object.keys(input[k]).length) {
output += drawFolders(input[k]); // recurse for child folders
}
//output += "";
if (counter == 0) {
output += "</a></li>";
} else {
output += "</li>";
}
counter = counter+1;
});
output += "</ul>";
return output;
}
var input = [
"A\\A1\\A2\\A3",
"A\\B\\B1\\B2",
"A\\B\\B4\\B5\\B5",
"A\\C\\C1\\C2\\D5",
"A\\D\\C1\\C2\\D5",
"A\\E\\C1\\C2\\D5",
"A\\F\\C1\\C2\\D5",
"A\\G\\C1\\C2\\D5",
"A\\H\\C1\\C2\\D5",
"A\\I\\C1\\C2\\D5",
"A\\J\\C1\\C2\\D5",
"A\\K\\E2\\C2\\D5",
"A\\K\\C1\\C2\\D5",
"A\\L\\C1\\C2\\D5",
"A\\M\\C1\\C2\\D5",
"A\\N\\C1\\C2\\D5",
"A\\O\\C1\\C2\\D5",
"A\\P\\C1\\C2\\D5",
"A\\Q\\C1\\C2\\D5",
"A\\R\\C1\\C2\\D5",
"A\\S\\C1\\C2\\D5",
];
document.getElementById("output").innerHTML = drawFolders(convert(input));
var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
for(var i = 0; i < tree.length; i++){
tree[i].addEventListener('click', function(e) {
var parent = e.target.parentElement;
var classList = parent.classList;
if(classList.contains("open")) {
classList.remove('open');
var opensubs = parent.querySelectorAll(':scope .open');
for(var i = 0; i < opensubs.length; i++){
opensubs[i].classList.remove('open');
}
} else {
classList.add('open');
}
});
}
ul.tree li {
list-style-type: none;
position: relative;
}
ul.tree li ul {
display: none;
}
ul.tree li.open > ul {
display: block;
}
ul.tree li a {
color: black;
text-decoration: none;
}
ul.tree li a:before {
height: 1em;
padding:0 .1em;
font-size: .8em;
display: block;
position: absolute;
left: -1.3em;
top: .2em;
}
ul.tree li > a:not(:last-child):before {
content: '+';
}
ul.tree li.open > a:not(:last-child):before {
content: '-';
}
<div id="output"></div>
推荐答案
尝试添加preventDefault()方法以防止def专注于页面顶部的行动。添加e.preventDefault();
示例。
Try adding the preventDefault() method to prevent the default action from focusing on top of the page. Add e.preventDefault();
Example.
tree[i].addEventListener('click', function(e) {
e.preventDefault()
var parent = e.target.parentElement;
var classList = parent.classList;
if(classList.contains("open")) {
classList.remove('open');
var opensubs = parent.querySelectorAll(':scope .open');
for(var i = 0; i < opensubs.length; i++){
opensubs[i].classList.remove('open');
}
} else {
classList.add('open');
}
});
参考:
preventDefault()事件方法 [ ^ ]
这篇关于用于在树结构中显示扩展按钮的列表扩展和CSS的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文