尽管在静态目录中有它，但无法将 javascript 应用于我在烧瓶中的模板.如何在下面的代码中解决这个问题?-前端问题

Couldn#39;t apply javascript to my template in flask despite having it in the static dir. How do I resolve that in the code below?(尽管在静态目录中有它，但无法将 javascript 应用于我在烧瓶中的模板.如何在下面的代码中解决这个问题?)

本文介绍了尽管在静态目录中有它，但无法将 javascript 应用于我在烧瓶中的模板.如何在下面的代码中解决这个问题?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个烧瓶项目，我正在尝试制作 tree 结构，但我不认为 JS 被应用于我的 tree.html它无法扩展选项.以下是我在互联网上找到的代码，由于我没有任何前端经验，因此我正在尝试使其工作.非常感谢您的帮助.

I have a flask project in which I'm trying to make a tree structure but I don't think the JS is being applied to my tree.html as it couldn't expand the options. Below is the code that I found in internet which I'm trying to make work as I don't have any frontend experience. I'd be grateful for your help.

Base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <script type="text/javascript" src="/static/jsfun.js"></script>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>

tree.html

{% extends "base.html" %}

{% block content %}
    <ul class="tree">
        <li><a href="#">Part 1</a>
            <ul>
                <li><a href="#">Item A</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item B</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item C</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item D</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item E</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>

        <li><a href="#">Part 2</a>
            <ul>
                <li><a href="#">Item A</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item B</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item C</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item D</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item E</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>

        <li><a href="#">Part 3</a>
            <ul>
                <li><a href="#">Item A</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item B</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item C</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item D</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item E</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
{% endblock %}

jsfun.js

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');
        }
    });
}

这是页面打开的时间

当我点击任何项目时，什么都没有发生:

And nothing happens when I click any item: