javascript - 从列表到可折叠菜单树
问题描述
我正在尝试从 ul 和 li 嵌套元素列表中创建可折叠/可扩展的菜单树。
具有“部分”类的元素只是文件夹,而具有“文档”类的元素是文件。
我从互联网上尝试了 4 或 5 种不同的方法,包括纯 CSS 和 jQuery,但我无法让它们都起作用。
现在我正在尝试使用这个脚本:https ://www.jqueryscript.net/layout/Animated-Tree-View-Plugin-For-jQuery-Bootstrap-3-MultiNestedLists.html
可悲的是,我对这个没有更多的运气,正如你在这个JSFiddle上看到的那样
你知道我哪里做错了吗?也许使用了错误的选择器?
非常感谢您的帮助。
顺便说一句,这部分适用于我的计算机,而它似乎不适用于 JSFiddle:
jQuery(document).ready(function() {
jQuery('li').each(function() {
var $this = jQuery(this);
if($this.html().replace(/\s| /g, '').length == 0) {
$this.remove();
}
});
});
解决方案
您的问题出在这部分代码中:
$this.html()
这样,您将获得 html 而不是文本,并且永远不会为空。改用:
if(this.textContent.replace(/\s| /g, '').length == 0) {
jQuery(this).remove();
}
你更新的小提琴
相反,如果您需要绘制一个文件夹/文件,只需在第一个 ul 中添加没有 js 代码的类multi-nested-list就足够了,如下面的代码片段所示。
请记住:在第一个 ul 之后,所有下一个都需要包装成一个 li。我只翻译了你的 html 的第一部分。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/olivsamuk/MultiNestedLists@master/style.css">
<script src="https://cdn.jsdelivr.net/gh/olivsamuk/MultiNestedLists@master/MultiNestedList.js"></script>
<div class="table">
<ul class="multi-nested-list">
<li><a>Preface, revisions, and safety</a>
<ul class="section">
<li><a>Preface</a>
<ul class="section">
<li><a> </a>
<ul class="section">
<li><a> </a>
<ul class="section">
<li><a> </a></li>
<li><a class="document">Service documentation</a></li>
<li><a class="document">About this documentation</a></li>
<li><a class="document">About this product</a></li>
<li><a class="document">Training</a></li>
<li><a class="document">Trademarks</a></li>
<li><a class="document">Contact</a></li>
<li><a class="document">Feedback</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<ul class="section">
<li><a>Revisions</a>
<ul class="section">
<li><a>Service documentation</a>
<ul class="section">
<li><a> </a>
<ul class="section">
<li><a> </a></li>
<li><a class="document">Version 1.0</a></li>
</ul>
</li>
</ul>
</li>
<ul class="section">
<li><a>Revision history</a>
<ul class="section">
<li><a> </a></li>
<li><a class="document">Version 0.0</a></li>
</ul>
</li>
</ul>
</ul>
</li>
</ul>
<ul class="section">
<li><a>Safety</a>
<ul class="section">
<li><a> </a>
<ul class="section">
<li><a> </a>
<ul class="section">
<li><a> </a></li>
<li><a class="document">Introduction</a></li>
<li><a class="document">About safety classifications</a></li>
<li><a class="document">About additional information</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<ul class="section">
<li><a>List of WARNING messages</a>
<ul class="section">
<li><a> </a>
<ul class="section">
<li><a> </a></li>
<li><a class="document">About biohazardous material</a></li>
<li><a class="document">About chemical reaction producing toxic gas</a></li>
<li><a class="document">About class 2 laser radiation</a></li>
<li><a class="document">About class 2M laser radiation</a></li>
<li><a class="document">About class 3B laser radiation</a></li>
<li><a class="document">About consumables</a></li>
<li><a class="document">About disposal of instruments, control units or parts</a></li>
<li><a class="document">About electric ground</a></li>
<li><a class="document">About electrical hazards</a></li>
<li><a class="document">About electromagnetic interference</a></li>
<li><a class="document">About environmental conditions</a></li>
<li><a class="document">About fire and burns</a></li>
<li><a class="document">About moving parts</a></li>
<li><a class="document">About optical or ultra violet radiation</a></li>
<li><a class="document">About power interruption</a></li>
<li><a class="document">About reagents and working solutions</a></li>
<li><a class="document">About sharp objects</a></li>
<li><a class="document">About sharp points</a></li>
<li><a class="document">About spare parts</a></li>
<li><a class="document">About strong magnetic field</a></li>
<li><a class="document">About the control unit</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="section">
<li><a>List of CAUTION messages</a>
<ul class="section">
<li><a> </a>
<ul class="section">
<li><a> </a>
<li><a class="document">About bridged lock sensors</a></li>
<li><a class="document">About heavy objects</a></li>
<li><a class="document">About hot surfaces</a></li>
<li><a class="document">About slippery surfaces due to condensation</a></li>
<li><a class="document">About software and data security</a></li>
<li><a class="document">About system cleaner</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<ul class="section">
<li><a>List of NOTICE messages</a>
<ul class="section">
<li><a> </a>
<ul class="section">
<li><a> </a></li>
<li><a class="document">About circuit breakers and fuses</a></li>
<li><a class="document">About electrostatic sensitive devices (ESD)</a></li>
<li><a class="document">About sprays</a></li>
<li><a class="document">About system cleaner replacement</a></li>
<li><a class="document">About wireless interference</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="section">
<li><a>About decontamination procedure prior to shipment</a>
<ul class="section">
<li><a> </a>
<ul class="section">
<li><a> </a></li>
<li><a class="document">About decontamination procedure prior to shipment</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
</ul>
</div>
推荐阅读
- javascript - 当字段名称包含 @ 字符时,我将如何从 JSON 响应中提取数据
- javascript - 如何使用异步 API 调用作为 Javascript 中的值构建对象
- c++ - 使用父类方法覆盖的多重继承
- c# - 如何检查是否单击了动态创建的标签并更改其颜色?
- google-sheets - 查找匹配数据并替换右侧单元格中的数据的代码
- azure-devops - 如何在 Azure DevOps 上使用 NuGet 将符号发送到我们的开发机器?
- nativescript - NativeScript Angular 与 ts/xml
- jquery - Bootstrap 4.1.3 modal body 保留 jquery 返回的数据。如何清除每个新请求的缓存?
- powershell - 有没有办法从运行手册中找到天蓝色区域?
- c# - 如何在 C# 数据网格中使用带有 MS Access 的文本框进行行过滤