从列表到可折叠菜单树

时间:2019-01-24 13:17:41

标签: javascript jquery html css

我正在尝试从ul和li嵌套元素列表中制作可折叠/可扩展的菜单树。

“ section”类的元素只是文件夹,而“ documents”类的元素是文件。

我尝试了Internet上的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();
        }
    });
});

1 个答案:

答案 0 :(得分:0)

您的问题在代码的这一部分:

$this.html()

这样,您将获得html而不是文本,并且该文本永远不会为空。改用:

if(this.textContent.replace(/\s| /g, '').length == 0) {
        jQuery(this).remove();
}

您更新的fiddle

相反,如果您需要绘制文件夹/文件,则足以将第一个 multi-nested-list 类别添加到第一个ul中,而无需js代码,如以下代码段所示。< / p>

请记住:在第一个ul之后,所有接下来的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>