<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>折叠下拉效果</title> <style> *{ margin: 0; padding: 0; } .main{ width: 500px; margin: 0 auto; border: 1px solid #ccc; padding: 8px; } h3{ font-size: 16px; font-weight: normal; height: 30px; line-height: 1.5; background-color: #F6F6F6; border: 1px solid #c5c5c5; padding: 2px; margin-top: -1px; } h3 i{ display: inline-block; width: 12px; height: 20px; vertical-align: -28%; background: url(./images/bg.png) no-repeat; background-position: 0 0; } .on{ background-position: -32px 0; } .main div{ border: 1px solid #c5c5c5; margin-top: -1px; height: 100px; display: none; padding: 2px; } .main div:nth-child(2){ display: block; } .active{ background: #007FFF; color: #fff; } </style></head><body> <div class="main"> <h3 class="active"><i class="on"></i>标题1</h3> <div>段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1</div> <h3><i></i>标题2</h3> <div>段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2</div> <h3><i></i>标题3</h3> <div>段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3</div> <h3><i></i>标题4</h3> <div>段落4段落4段落4段落4段落4段落4段落4段落4段落4段落4段落4段落4段落4段落4</div> </div>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script> $(function(){ $("h3").click(function(){ var status=$(this).next("div").css("display"); console.log($(this).css("display")); if (status=="none") { $(this).addClass("active").next("div").slideDown().siblings('div').slideUp(); $(this).siblings('h3').removeClass('active').find("i").removeClass('on'); $(this).find('i').addClass('on'); } }) }) </script></body></html>
转载于:https://www.cnblogs.com/chabai/p/5895231.html
相关资源：jquery三级下拉折叠手风琴菜单导航效果