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>
