实现功能:点击按钮隐藏商品列表,再次点击显示
使用工具:jQuery
<!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>hello</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}"/> </head> <body> <button type="button" class="btn btn-success" style="margin: 10px;" ms-click="@request">商品列表</button> <table class="table table-striped" id="t1"> <thead> <tr> <th class="info">ID</th> <th class="success">Name</th> <th class="warning">Price</th> </tr> </thead> <tbody> <tr th:each="prod: ${prodList}"> <td th:text="${prod.id}"></td> <td th:text="${prod.name}">Oranges</td> <td th:text="${#numbers.formatDecimal(prod.price, 1, 2)}">0.99</td> </tr> </tbody> </table> </body> <script th:src="@{/js/bootstrap.min.js}"></script> <script th:src="@{/js/jquery-1.6.2.js}"></script> <script> $('button').click(function () { if( $("#t1").is(":hidden")){ $("#t1").show(); }else{ $("#t1").hide(); } }); </script> </html>
利用jQuery的一个方法,$(元素).is(":hidden")进行判断