jsp页面基于jQuery收起展开的动作效果

最新推荐文章于 2022-07-21 11:02:10 发布

werlini

最新推荐文章于 2022-07-21 11:02:10 发布

阅读量3.1k

点赞数

分类专栏：前端文章标签： jquery css jsp

本文链接：https://blog.csdn.net/pijiong5316/article/details/78415226

版权

本文介绍了如何利用jQuery库在JSP页面中创建收起展开的交互效果，通过CSS来辅助实现样式控制。主要内容包括jQuery的选择器、事件绑定以及CSS的相关样式设置。

摘要由CSDN通过智能技术生成

CSS代码：

<style>
.panel{
       		margin:0px;
       		padding:5px;
       		text-align:center;
       		display:none;
       }
       
	   .flip{
	   		margin:0px;
	   		padding:5px;
	   		text-align:center;
	   		background:#F2F2F2;
	   		color : #1B92FD;
	   	}
</style>

HTML代码：

<div class="panel">
	<!-- 要隐藏的内容 -->			
</div>
<p class="flip">
	<span class="1">展开</span>
	<span class="2" style="display:none;">收起</span>
</p>

JS代码：

//隐藏非必填项操作
        $(".flip").click(function(){
        	$(".panel").slideToggle("normal");
        	$(".1").toggle();
        	$(".2").toggle();
        });