HTML文档的计算问题

OKJSJSF · 发表于 2024-10-20 09:13

由于网页是固定的，搜索到匹配项后，可以直接写元素的各级父元素details展开的代码，由远及近，不必判断.

OKJSJSF · 发表于 2024-10-20 14:09

今天发现代码并未正确执行，只能搜索展开一个级别的菜单。昨晚示例因为二个级别内容有重复，搜索时二个级别都能展开。今于修改了内容，不能正常匹配展开。

OKJSJSF · 发表于 2024-10-20 14:11

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度AI折叠搜索示例</title>
</head>

<body>
<input type="text" id="search" placeholder="搜索...">
<details><summary>一级菜单1</summary>
<ul>
<li>项目一</li>
<details><summary>二级菜单1</summary>
<ul>
<li>项目三</li>
<li>项目四</li>
</ul>
</details>
</ul>
</details>

<details><summary>一级菜单2</summary>
<ul>
<li>项目二</li>
</ul>
</details>

</body>
<script>
document.getElementById('search').addEventListener('input',function(){
const query=this.value.trim().toLowerCase();
const lis=document.querySelectorAll('li');
const details=document.querySelectorAll('details');
details.forEach(detail=>detail.open=false);
if(query===''){return;}
lis.forEach(li=>{
if(li.textContent.toLowerCase().includes(query)){
let detail=li.closest('details');
while(detail){
detail.open=true;
detail=detail.closest('details');
}
}
});
});
</script>
</html>

OKJSJSF · 发表于 2024-10-20 14:13

上面百度示例并不能正常执行搜索，搜索时网页会假死，必须关闭才能重新使用。假死的原因是最后的while循环语句。

OKJSJSF · 发表于 2024-10-26 13:59

休息了几天没弄，今天搜索功能完成了。匹配到的项目的多级父元素的表达式不能用一个一个的点号层层扩展，必须采用类或其他标志一次性获取。
document.getElementById('search').addEventListener('input',myf2,false);
function myf2(){
document.querySelectorAll('details').forEach(details=>{details.open=false});
const searcht=this.value.trim().toLowerCase();
const lis=document.querySelectorAll('ol');
if(searcht === ''){return;}
lis.forEach(li => {
if(li.textContent.toLowerCase().includes(searcht)){
li.closest('details.closeopen').open=true;
li.closest('details.closeopen2').open=true;
li.closest('details').open=true;
}
});
};

OKJSJSF · 发表于 2024-11-1 21:47

员工电话簿(样式1菜单在左兄弟元素展开).rar (2.42 KB, 下载次数: 1) 请家人们多提意见。自我感觉在阅读时这种Html文件比PDF图片文件好得多。

OKJSJSF · 发表于 2024-11-3 16:17

今天把一个有多级标题与标标题多级编号的word文档传到手机微信，打开后选择适应屏幕，离开微信打开其它应用，即”QQ浏览器文件服务“，可以看到按原先设置的标题样式等显示的文档内容。滑动屏幕，会弹出”目录“按钮，点击目录按钮，弹出一个很大的目录窗口，面积超过屏幕一半以上，点击其中的各个标题，会跳转至对应内容。但这个目录不显示标题的多级编号。

OKJSJSF · 发表于 2024-11-8 22:32

我的手机上Word的目录是展开的，不能折叠。

		自动登录	找回密码
密码			免费注册

[求助] HTML文档的计算问题

浏览过的版块