Question

我有一个烧瓶项目，其中我正在尝试制作树结构，但我不认为JS正在应用于我的tree.html，因为它无法展开选项。下面是我在互联网上找到的代码，我正在努力工作，因为我没有任何前端经验。我很感激你的帮助。

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

这是打开页面的时间

当我点击任何项目时没有任何反应：

Answer 1

请检查this个回购。检查你犯错误的地方。我相信你导入js文件的方式。你应该使用如下

<script src="{{ url_for('static', filename='js/jsfun.js') }}"></script>

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

1 个答案: