jquery 实现折叠面板

1.dom元素

<div class="box">
	<ul id="ul">
		<li>Client agreement
			<div class="line"></div>
			<div class="content">
				<p>RISK WARNING: Trading leveraged derivative products such as Foreign Exchange (Forex), </p>
			</div>
		</li>
		<li>Client agreement
			<div class="line"></div>
			<div class="content">
					<p>RISK WARNING: Trading leveraged derivative products such as Foreign Exchange (Forex), </p>
			</div>
		</li>
		<li>Client agreement
			<div class="line"></div>
			<div class="content">
	              <p>RISK WARNING: Trading leveraged derivative products such as Foreign Exchange (Forex), </p>
			</div>
		</li>
	</ul>
</div>

2.css样式

<style>
			ul {
				margin: 0;
				padding: 0;
			}
			
			li {
				list-style: none;
				
			}
			
			.box {
				max-width: 1240px;
				margin: 0 auto;
				background-color: #fff;
				box-shadow: 0 0 5px 3px rgba(20, 20, 20, 0.1);
			}
			
			#ul {
				padding: 55px;
				margin: 0 auto;
				max-width: 880px;
			}
			#ul>li{
				cursor: pointer;
			}

			.line{
				border-bottom: 1px solid red;
				margin: 20px 0px;
			}
			.content{
				display: none;
				
			}

		</style>

3.js代码

<script>
	$("li").click(function(){
		if($(this).find(".content").css("display")=="none"){
			 
      $(this).find(".content").slideDown().end().siblings("li").find(".content").slideUp();

		}else if($(this).find(".content").css("display")=="block"){

			$(this).find(".content").slideUp();
		}
	})
</script>