繁体   English   中英

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

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

我正在尝试为Spring MVC应用程序构建导航,而我的jsp页面中有一个多级无序列表。 我想扩大/缩小图片点击次数(可能有点“加号”)。 在Spring MVC应用程序中有没有办法做到这一点?

编辑..现在,我正在尝试仅实现简单的扩展和折叠(我还没有添加“加号”标志图像等。)这是我尝试的最后一件事

script.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只是充当一种控制器机制,您在这里要做的是使用某种JavaScript控制“加号”,这些JavaScript会调用Spring MVC控制器来获取列表,并且当您单击+符号时,它就会折叠或扩展了HTML中的列表。

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM