gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 13:55:50 25 4
gpt4 key购买 nike

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

编辑..现在我只是尝试实现简单的展开和折叠(我没有添加“加号”图像等)这是我尝试的最后一件事

脚本.js

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

index.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 只是充当 Controller 机制,您在这里要做的是使用某种 javascript 控制“加号”,该 javascript 将调用 Spring MVC Controller 来获取列表,当您单击 + 符号时,它会只是折叠或展开 HTML 中的列表。

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

关于java - 如何在 Spring MVC 中实现无序列表的展开/折叠功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19633835/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com