如何在Spring MVC中实现无序列表的展开/折叠功能

How to implement expand/collapse functionality for unordered list in Spring MVC

本文关键字：功能 折叠 列表 无序 Spring MVC 实现      更新时间：2023-09-26

我正在尝试为我的Spring MVC应用程序构建导航，并且我的jsp页面中有一个多级无序列表。我希望有可能在图像单击时展开/折叠（也许是一个小"加号"号）。有没有办法在Spring MVC应用程序中做到这一点？

编辑。。现在我只是试图实现简单的展开和折叠（我没有添加"加号"符号图像等）这是我尝试过的最后一件事

脚本.js

$（'.

listitem'）.click（function （） { $（this）.find（'ul'）.slideToggle（）;});

索引.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head>
    <title></title>
    <script type="text/javascript"
            src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="${context}/js/script.js"></script> </head> <body>
    <div style="float: left; width: 20%">
        <h4>${treeView}</h4>
    </div>
    <div style="float: left; width: 80%" id="thePage">
        <iframe id="frame1" name="frame1" scrolling="auto" runat="server" style="float: left; width: 100%; height: 950px;"></iframe>
    </div> </body> </html>

我渲染了什么...

<html> <head>
    <title></title>
    <script type="text/javascript"
            src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="/js/script.js"></script> </head> <body>

<div style="float: left; width: 20%">
    <h4><?xml version="1.0" encoding="UTF-8" standalone="no"?>
        <ul class="list">MyList
            <li class="listitem">
                <ul>HO.jws
                    <li class="listitem">
                        <ul>HO1.jpr
                            <li class="listitem">
                                <ul><a href="http://localhost:8000/resources//HO1//file1.html"
                                       target="frame1">file1.ext</a>
                                    <li class="listitem">
                                        <ul>Names</ul>
                                    </li>
                                    <li class="listitem">
                                        <ul>Functions</ul>
                                    </li>
                                    <li class="listitem">
                                        <ul>Properties</ul>
                                    </li> ...
Spring MVC只是

充当控制器机制，你在这里要做的是用某种javascript控制"加号"符号，该脚本将调用Spring MVC控制器来获取列表，当你点击+符号时，它只是折叠或展开HTML中的列表。

您可以在页面加载时获取列表的内容，例如在带有 $(document).ready() 的 jQuery 中，获取列表并构建 html，然后如果此列表出现在 DOM 中，则所有 + 符号所做的就是更改。

相关文章：