时间戳

首页 > 解决方案 > 有没有另一种方法可以将 JS 连接到 HTML？

javascript - 有没有另一种方法可以将 JS 连接到 HTML？

问题描述

我想在 HTML/CSS/JS 中制作一个可折叠的目录列表，但它似乎不起作用（可折叠部分）。其他一切都很好。你能帮我吗？

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul class="directory-list">
    <li>assets
        <ul>
            <li>css
                <ul>
                    <li>typography.css</li>
                    <li>layout.css</li>
                    <li>modules.css</li>
                    <li>states.css</li>
                    <li>theme.css</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
<script type="text/javascript">
    const allFolders = $(".directory-list li > ul");
    allFolders.each(function() {

        const folderAndName = $(this).parent();
        folderAndName.addClass("folder");

        const backupOfThisFolder = $(this);
        $(this).remove();
        folderAndName.wrapInner("<a href='#' />");
        folderAndName.append(backupOfThisFolder);

        folderAndName.find("a").click(function(e) {
            $(this).siblings("ul").slideToggle("slow");
            e.preventDefault();
        });

    });
</script>
</body>
</html>

标签： javascripthtml

解决方案

您需要添加对 jquery 的引用。您自己的 javascript 似乎正在引用它。

您可以在标题标签中添加此链接

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

或者您可以使用 vanilla (plain) javascript 制作可折叠功能：

https://codepen.io/sheelah/pen/EPEOBb

甚至是 CSS：

https://alligator.io/css/collapsible/

推荐阅读